嵌套的axios api请求/调用未在子组件reactjs中呈现

Question

我被困住了。我正在尝试进行嵌套的 api 调用，然后将结果传递给父组件中的 state，然后将 state 作为 props 传递给子组件。

调用似乎有效，并且 props 似乎已通过（我可以通过控制台将它们从子组件的渲染方法中注销），但它们实际上不会在子组件中呈现。

我强烈怀疑我在 api 调用中犯了一个错误，但我无法确定它是什么。我一直在那里使用另一个答案作为模板，但没有发生任何事情：

App.js 中的代码（父级）：

import React from 'react';
import atom from './api/atom';
import axios from 'axios';
import Documents from './components/Documents';
class App extends React.Component {
    state = {
        parents: [],
        posts: [],      
    };

      async getPosts () {
          let corsUrl = 'https://cors-anywhere.herokuapp.com/';
          let atomUrl = 'http://baseurl.co.uk/';
          let endpoint = 'api/informationobjects';
          let headers = {'Authorization': 'Basic ' + btoa('myname@rmail.co.uk:pwd')};

          axios.get(corsUrl + atomUrl + endpoint, {
            headers: headers,
          })
          .then(( response ) => {
            let items = response.data.results;
            let itemArray = [];

            // wait for nested calls to finish
            return Promise.all(items.map((item, index) => {
                return axios.get(corsUrl + atomUrl + endpoint + "/" + item.slug, {
                  headers: headers,
                })
                .then((response) => {
                  itemArray.push(response);
                }).then(this.setState({'posts': itemArray}))
            }));
            }
          )
          .catch(error => console.log("outer error: ", error));  
        }

    componentDidMount() {
      this.getPosts();
    }

    render() {
      return (
        <div>
            <h1>App.js</h1>
            <Documents posts={this.state.posts} />
        </div>      
      );
    }
};

export default App;

Documents.js 中的代码（子）：

import React from 'react';

class Documents extends React.Component {

    render() {
        console.log("props: ", this.props.posts);

        return (
            <div>
                <hr />
                <h1>Documents.js</h1>
                <ul>posts: 
                    {this.props.posts.map((item, index) => {
                        return <li>test</li>
                    })}
                </ul>
            </div>
        );
    }
}

export default Documents;

正如我所说，我严重怀疑问题出在嵌套的异步调用中。我尽我所能遵循了这个答案中给出的模板：ReactJS setState when all nested Axios calls are finished，但它不起作用。

我对反应和使用 api 还很陌生，所以对于更有经验的人来说，这可能是显而易见的事情。

提前致谢。

加法

我忘了提，没有任何类型的错误消息。测试列表项根本不呈现。

Answer 1

then 接受参数中的函数，.then(this.setState({'posts': itemArray})) 无效。

顺便说一句，Promise.all 已经返回了一个包含解析值的数组，因此您无需手动创建数组

你可以试试这个代码：

async getPosts () {
  const corsUrl = 'https://cors-anywhere.herokuapp.com/';
  const atomUrl = 'http://baseurl.co.uk/';
  const endpoint = 'api/informationobjects';
  const headers = {'Authorization': 'Basic ' + btoa('myname@rmail.co.uk:pwd')};
  const baseUrl = corsUrl + atomUrl + endpoint;

  axios.get(baseUrl, {headers})
    .then(response => {
      const promises = response.data.results
        .map(item => axios.get(`${baseUrl}/${item.slug}`, {headers}));

      Promise.all(promises)
        .then(posts => this.setState({posts}));
        .catch(error => console.log("outer error: ", error)); 
    }); 
}

Answer 2

因为当 api 调用发生时，它是一个未来的调用，所以此时帖子数组将为空，并且将发生子项的初始渲染，因此您需要检查并在帖子更新时通过帖子

正如您提到的，如果帖子即将发布，请尝试使用以下代码进行更新

{
  this.state.posts.length && 
   <Documents posts={this.state.posts} />
}