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

を