如何有效地从URL获取数据并使用reactjs读取它？

Question

我有一些带有json的URL，需要读取数据。在本例中，json如下所示：

{
   "results": [
        ...
     ],

   "info": {
        ...
     }
}

我想将获取的数据作为组件的属性返回。最好的方法是什么？我试着用axios做到这一点。我设法获取数据，但在render（）方法中设置state之后，我收到了一个空对象。以下是代码：

export default class MainPage extends React.Component {

constructor(props: any) {
   super(props);
   this.state = {
       list: {},
       };
   }

   public componentWillMount() {
       axios.get(someURL)
       .then( (response) => {
           this.setState({list: response.data});
           })
       .catch( (error) => {
           console.log("FAILED", error);
        });
     }

   public render(): JSX.Element {

     const {list}: any = this.state;
     const data: IScheduler = list;

     console.log(data); // empty state object

     return (
        <div className="main-page-container">
           <MyTable data={data}/>  // cannot return data
        </div>
     );
   }
}

我不知道为什么在render（）方法中数据消失了。如果我把

console.log(response.data);

在。然后部分，我获得状态为200的数据。

所以我现在问是否有其他方法可以做到这一点。我将感谢任何帮助。

----更新----在此之后，我在MyTable组件中发现一个错误：

const flightIndex: number 
= data.results.findIndex((f) => f.name === result);

错误是：

Uncaught TypeError: Cannot read property 'findIndex' of undefined

这里怎么了？如何判断这不是财产？

Answer 1

在React中，在您将ajax结果存储在组件的状态（您似乎正在这样做）后，您可以通过调用this.state.list检索该结果

因此，为了确保它正常工作，请尝试

https://daveceddia.com/ajax-requests-in-react/

Answer 2

在返回请求之前，React将尝试呈现组件。然后，一旦请求完成并返回数据，react将在setState调用后重新呈现组件。

问题是您的代码没有考虑空/未定义的数据对象。只需添加一个检查，即。

if (data && data.results) {
    data.results.findIndex(...);
} else {
    // display some loading message
}