Question

我是Reacjs的新手，我访问了几个类似标题的问题，但没有人帮助过我。

为什么这段代码不会改变我的状态？

 componentWillMount()
 {
     /** I am using superagent to fetch some data but it doesn't matter */

     var url = "http://www.omdbapi.com/?s=star&apikey=mykey";
     Request.get(url).then((response) => {

     this.setState({ messages: response.body.Search});


    });
  }

我的渲染方法

    render() {

         return (

                 <div>     
  <ListaMensagens  messages={this.state.messages}  /> this.state is null here.
                </div>
            ...

如何使用检索到的数据更改状态并将其传递给子组件？

Answer 1

一般情况下，你可以在componentWillMount中使用setState而不会遇到麻烦，但是......

在您的情况下，您在请求响应之后设置状态，这会导致问题。

针对您的问题的三种解决方案：

1：使用构造函数初始化状态。

constructor(props){
    super(props);

    this.state = {
        messages: []
    };
}

2：在componentWillMount中触发setState而不等待任何Promise

componentWillMount() {
    this.setState({
        messages: []
    });
    request(...);
}

3：在渲染功能中检查状态是否设置正确

render(){
    <div>
        { this.state && this.state.messages && <ListMensagens ... /> }
    </div>
}

为什么我得到＆＃34; this.state为null＆＃34;在Reactjs？

1 个答案: