Question

您好我正在使用axios在React中获取JSON数据，问题是我无法在获取的数据中进行搜索。

我尝试在父组件中获取数据，但请求是异步的，因此它首先加载子组件然后获取数据。

以下是我的代码：

  axios.get("/url.json")
    .then(function(result) {
      teams= result.data.teams
  });

ReactDOM.render(
<div>
  <App teams={teams}/>
</div>
,document.getElementById('app')
)

如果我使用子组件内的axios获取数据，如何保存搜索数据？即我需要搜索未经过滤的数据。

Answer 1

请求成功后调用ReactDOM.render：我的意思是在axios回调中不在外面。

 axios.get("/url.json")
    .then(function(result) {
      const teams= result.data.teams;
      ReactDOM.render(
        <div>
         <App teams={teams}/>
        </div>
       ,document.getElementById('app')
     )
  });

..... OR .....

作为最佳实践，您可以在 componentDidMount 中添加另一个处理此调用的图层（超级父级）：

class Root extends React.Component {

   constructor() {
     super(...arguments);
     this.state= {teams : []};
   }
   componentDidMount() {
     axios.get("/url.json")
        .then((result) => {
          this.setState({teams: result.data.teams})
      });
   }

  render() {

    return (
        <div>
          <App teams={this.state.teams}/>
        </div>
     )
   }


}

 ReactDOM.render(
    <Root />
   ,document.getElementById('app')
)

反应axios数据和多组件搜索

1 个答案: