Question

我有一些带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

这里有什么问题？如何判断这不属于财产？

Answer 1

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

问题是您的代码未说明空/未定义的数据对象。只需添加支票即可，即

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

Answer 2

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

因此，为确保此功能正常，请尝试<MyTable data={this.state.list}>

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

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

2 个答案: