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