代码之家 › 专栏 › 技术社区 › letsCode

一个组件从服务器获取响应并与所有组件共享

reactjs javascript

letsCode · 技术社区 · 6 年前

我将有一些组成部分,使仪表板。我有一个servercall.js,现在看起来像这样。

class ServerCall extends Component {

  constructor(props) {
      super(props);
      console.log(this.props);
      this.state = {num: "", response: ""};
    }

   componentDidMount() {
      const num = window.location.pathname;
      this.setState({ num: num });
   }

   componentWillMount() {
     this.setState({response: "put response here."});
   }

  render() {
    console.log("servercall props", this.props)
    return (
            <div>
                <p><br />Path from URL: {this.state.num.substring(1)}</p>
        <p>{this.state.response}</p>
            </div>
    );
  }
}

export default ServerCall;

这个类将对服务器进行异步调用,响应将是一个相当大的json文件。从这里开始,我想将响应状态支付给我的所有其他组件,这样我就可以使用其中的其他信息。

话虽如此,我还有另一个正在开发的组件,behavior.js。

这看起来像这样。。。

import ServerCall from '../servercall.js';


class Behavior extends Component {

  constructor(props) {
      super(props);
      this.state = {response: ""}
    }

  render() {
    return (
      <div>
      <ServerCall response={this.state.response} />

        <div className="container componentBorder">

            <div className="row heading">
                <h5>Behavior Patterns</h5>
            </div>

            <div className="row">
              <div className="scrollableDiv">
                {this.state.response}
              </div>
            </div>

        </div>
      </div>
    );
  }
}

export default Behavior;

响应为空。。。我在这里错过了什么或做错了什么?