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

我在Javascript中尝试过的功能是for循环和EC6映射，似乎没有任何作用。作为 react 新手，我可能会错过一些东西，但我不确定它是什么。

react 代码

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); 
      }) 
  }, 

请您参考如下方法:

React setState 的行为是异步的。您的文章会在调用 ajax 之前渲染，并且由于 setState 中的异步性而不会重新渲染。

这就是文档( 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)); 
  }