如何在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（built in functions）所说的

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在应用更新后触发。如果您需要根据以前的状态设置状态，请阅读下面的更新程序参数。

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

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

Answer 2

由于上面的帖子，我能够通过下面的代码示例解决问题。要查看工作示例goto 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));