Javascript 如何在react中设置新数据的状态？

我刚开始研究reactjs并尝试从API检索数据：

constructor(){
    super();
    this.state = {data: false}
    this.nextProps ={};

    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
            nextProps= response;
        });
  }

当承诺返回数据时，我希望将其分配给以下状态：

componentWillReceiveProps(nextProps){
    this.setState({data: nextProps})
  }

如何使用从API接收的数据更新状态？目前还没有设定状态

---

jsbin ref:

惯例是在

componentDidMount

生命周期方法中进行AJAX调用。请查看React文档：

通过AJAX加载初始数据
在componentDidMount中获取数据。当响应到达时，将数据存储在状态中，从而触发渲染 更新你的用户界面

因此，您的代码将成为：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={data:false}
}
componentDidMount（）{
axios.get（）https://jsonplaceholder.typicode.com/posts')
。然后（响应=>{
this.setState（{data:response.data[0].title}）
});
}
render（）{
返回(
{this.state.data}
)
}
}
ReactDOM.render（）显示了使用1）jQuery和2）Axios库实现此功能的两种方法

完整代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      time1: '',
      time2: ''
    };
  }

  componentDidMount() {
    axios.get(this.props.url)
      .then(response => {
        this.setState({time1: response.data.time});
      })
      .catch(function (error) {
        console.log(error);
      });

    $.get(this.props.url)
      .then(result => {
        this.setState({time2: result.time});
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <p>Time via axios: {this.state.time1}</p>
        <p>Time via jquery: {this.state.time2}</p>
      </div>
    );
  }
};


ReactDOM.render(
  <App url={"http://date.jsontest.com/"} />,  document.getElementById('content')
);

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
时间1:“”，
时间2:“”
};
}
componentDidMount（）{
get（this.props.url）
。然后（响应=>{
this.setState（{time1:response.data.time}）；
})
.catch（函数（错误）{
console.log（错误）；
});
$.get（this.props.url）
。然后（结果=>{
this.setState（{time2:result.time}）；
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
返回(
通过axios的时间：{this.state.time1}

通过jquery的时间：{this.state.time2}

);
}
};
ReactDOM.render(
，document.getElementById（'content'））
);
您可以尝试下面的示例代码，如果需要进一步帮助，请告诉我

var YourComponentName = React.createClass({
  componentDidMount: function() {
    var that = this;
    // Your API would be calling here and get response and set state here as below example
    // Just an example here with AJAX something you can do that.
    $.ajax({
      url: 'YOURURL',
      dataType: 'json',
      type: 'POST',
      data: data,
      success: function(response) {
        that.setState({data: response})
      }
    });
  },
  render: function() {
    return ();
  }
});

谢谢
 直接从promise中调用
setState
，无需通过Prop。我刚刚添加了您的代码，并对我的aswer进行了必要的更改。你想让我补充点什么还是回答你的问题。
var YourComponentName = React.createClass({
  componentDidMount: function() {
    var that = this;
    // Your API would be calling here and get response and set state here as below example
    // Just an example here with AJAX something you can do that.
    $.ajax({
      url: 'YOURURL',
      dataType: 'json',
      type: 'POST',
      data: data,
      success: function(response) {
        that.setState({data: response})
      }
    });
  },
  render: function() {
    return ();
  }
});