React axios 数据和多组件搜索

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

..... 或.....

作为最佳实践，您可以添加另一层（超级父层）在其 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')
)

React axios 数据和多组件搜索

React axios data and multi component search

ajax

reactjs

axios