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

..... 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') 
)