小编典典

如何将setState设置为新数据?

reactjs

我刚刚开始查看reactjs并尝试从API检索数据:

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

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

当promise返回数据时,我想将其分配给状态:

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

如何使用从API接收到的数据更新状态?此刻状态未设置?

jsbin参考:https
://jsbin.com/tizalu/edit ?
js,控制台,输出


阅读 272

收藏
2020-07-22

共1个答案

小编典典

约定是在componentDidMount生命周期方法中进行AJAX调用。看看React文档:https : //facebook.github.io/react/tips/initial-
ajax.html

通过AJAX加载初始
数据在componentDidMount中获取数据。响应到达时,将数据存储在状态下,触发渲染以更新您的UI。

因此,您的代码将变为:https :
//jsbin.com/cijafi/edit?html,js,output

class App extends React.Component {
  constructor() {
    super();
    this.state = {data: false}
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
            this.setState({data: response.data[0].title})
        });
  }

  render() {
    return (
     <div> 
      {this.state.data}
     </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

这是另一个演示(http://codepen.io/PiotrBerebecki/pen/dpVXyb),展示了使用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')
);
2020-07-22