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

【问题标题】：How to efficiently fetch data from URL and read it with reactjs?如何有效地从 URL 中获取数据并使用 reactjs 读取？
【发布时间】：2018-05-23 21:16:50
【问题描述】：

我有一些带有 json 的 URL，需要读取数据。为了这个例子，json看起来像这样：

{
   "results": [
        ...
     ],

   "info": {
        ...
     }
}

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

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

在 .then 部分，我得到状态为 200 的数据。

所以我现在问是否有其他方法可以做到这一点。如果有任何帮助，我将不胜感激。

----更新---- 在 MyTable 组件中，之后出现错误：

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

错误是：

Uncaught TypeError: Cannot read property 'findIndex' of undefined

这里有什么问题？如何判断 react 这不是属性？

【问题讨论】：

代码对我来说似乎很好 -- 你确定 someURL 没有返回一个空对象吗？
是的，我确定。
好的。我面临另一个问题。在组件“MyTable”中，当我使用 data.results.findIndex(...) 时，出现错误：“Uncaught TypeError: Cannot read property 'findIndex' of undefined”。 findIndex() 在一个方法中，那么这里有什么问题呢？我在上面添加了完整的表达式..

标签： json ajax reactjs typescript

【解决方案1】：

在请求返回之前，React 会尝试渲染你的组件。然后，一旦请求完成并返回数据，react 将在 setState 调用之后重新渲染您的组件。

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

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

【讨论】：

【解决方案2】：

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

为了确保它正常工作，请尝试<MyTable data={this.state.list}>

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

【讨论】：

导致错误：类型“只读”上不存在属性“列表”。
如果不查看其他班级，很难确定该错误。看到这个问题：stackoverflow.com/questions/47561848/…
我刚刚用类定义更新了我的代码