如何在 Axios 响应后创建一个数组并在 React js 中显示它

Question

我在根据 Axios 响应创建标题数组时遇到问题。 getTitles(props) 方法从 Axios 响应中接收数据。如何动态创建标题数组？

我在Javascript中试过的函数有for loops和EC6 mapping，好像都没有用。作为新手，我可能会遗漏一些东西，但我不确定它是什么。

反应代码

export default class Featured extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null,
   }
  }

  /**
   *  Received request from server
   */
  componentDidMount(){
    ApiCalls.articleData()
      .then(function(data){
        this.setState(function(){
            return {
              data: data
            }
        })
      }.bind(this));
  }

  getTitles(props){

    //-- What code do I place here?

    console.log(props.data)
    return ['test title', 'test title 2'];


  }

  /**
   *  Render request
   */
  render() {
    let dataResponse = JSON.stringify(this.state.data, null, 2); 
    const Articles = this.getTitles(this.state).map((title, i) => <Article key={i} title={title}/> );
    return (
        <div class="row">{Articles}
        <pre>{dataResponse}</pre> 
        </div>
    );
  }
}

Axios 代码

var ApiCalls = {
  articleData: function(id){
    return axios.all([getArticles(id)])
      .then(function(arr){
        return arr[0].data.data;
      })
      .catch(function (error) {
        console.log(error);
      })
  },

Answer 1

React setState 行为异步。您的文章在调用 ajax 之前呈现，并且由于 setState 中的异步而未重新呈现。

这就是 doc(https://reactjs.org/docs/react-component.html#setstate) 所说的

setState() 并不总是立即更新组件。它可能会分批更新或将更新推迟到以后。这使得在调用 setState() 之后立即读取 this.state 成为一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调 (setState(updater, callback))，它们都保证在应用更新后触发。如果您需要根据之前的状态设置状态，请阅读下面的更新程序参数。

您可以在成功 ajax 调用后呈现文章，如下所示

componentDidMount(){
    ApiCalls.articleData()
      .then(function(data){
        render(<Article data={data}/>, document.getElementById('...'));
      }.bind(this));
  }

Answer 2

由于上面的 post，我能够通过下面的代码示例解决问题要查看工作示例转到 the git repo

  ApiCalls.articleData()
      .then(function(data){
        const newData = data.map(c => {
          return  c.attributes.title;
        })
        const addElement = newData.map((title, i) => <ContentTiles key={i} title={title}/> );
        const newState = Object.assign({}, this.state, {
           newData: addElement
        });
        this.setState(newState);
      }.bind(this));

如何在 Axios 响应后创建一个数组并在 React js 中显示它

How do I create an array after Axios response and Display it in React js

javascript

reactjs

axios