React - Axios reqから別のコンポーネントにデータを渡す

Question

別のコンポーネントにあるAxios reqのデータを別のコンポーネントに渡したいと思います。私は私のコードスニペットで詳しく説明します。

私のdoorsLayout.js私は、アドレスへのAxios呼び出しを行っています。そして、私はresのデータを取得しています。その後

this.serverRequest = axios 
    .get('http://blablabla/locks') 
    .then(res => { 
    // Rerender state 
    this.setState({ 
     res, 
     dataToDisplay: res.data.slice(0, numToDisplay || 5) 
    }) 
    }) 

私はと呼ばれる新しいコンポーネントを作っています（同じファイル内）doorsItem.jsここ：

const items = dataToDisplay.map(item => <DoorsItem item={item} />) 

そしてDoorsItemの内側に私はAxios呼び出しからデータを出力しています：

const DoorsItem = ({ item }) => 
     <Grid> 
     <Row key={item._id} className="show-grid"> 
      <Col md={12}> 

      <ul style={{ marginTop: '10px' }}> 
       <li className="info-container"> 
       <h4 className="title-text-container">{item.address.street}</h4> 
{/*etc etc*/} 

私はでAxiosコールから得たすべての情報を出力できます。しかし同じファイルでは、他のものも出力したいのですが、別のAxios reqから出力したいのです。

<DropdownButton 
     title="Lägg till ny användare" 
     id="bg-nested-dropdown" 
    > 
    <MenuItem eventKey="1" style={{ marginLeft: '500px' }}> 
    {/*Different Axios data here!*/} 
    </MenuItem> 
    </DropdownButton> 

そして、私は出力したいデータは、このコンポーネントで発見された：users.js

this.serverRequest = axios 
    .get('http://blablabla/customers') <-- Just a different endpoint 
    .then(res => { 
    // Rerender state 
    this.setState({ 
     res, 
     dataToDisplay: res.data.slice(0, numToDisplay || 5), 
    }) 
    }) 

などをdoorsItem.jsに私はuserItemにレイアウトの同じタイプを持っています.js：

const UsersItem = ({ item }) => 
    <Row 
    key={item._id} 
    className="show-grid" 
    style={{ margin: '-15px 0 -15px 0' }} 
    > 
    <Col md={12}> 
     <ul style={{ marginTop: '10px' }}> 
     <li className="info-container"> 
      <div> 
      <h5 className="title-text-container">{`${item.name} ${item.surname}`}</h5> 

ここに私の質問があります。 doorsItemに'http://blablabla/customers'のデータを出力したい場合、最も簡単で「最良の」方法は何ですか？私はちょっと遊んだので、ドロップダウンをクリックすると、という1つのという名前が表示されます。その名前はIDに関連付けられているためです。しかし、私はちょうど'http://blablabla/customers'からすべての名前をドロップダウンしたいです。

申し訳ありませんが、私の質問が乱雑です！しかし、読んでくれてありがとう！

Answer 1

あなたができる二つのことがあります。

1. は、すべての要求を処理し、子コンポーネントへの小道具としてデータを渡すコンテナコンポーネントを作成します。

2. ReduxやMobXなどの共有ストアオブジェクトを導入する。

quote:

時々

（Reduxの中 保存する何かがぎこちなくなったとき）あなたが状態を反応させることReduxの状態から移動したいと思うか、周りの他の方法は、（ 複数のコンポーネントが持っている必要があります以前はローカルの ローカルにアクセスしていました）。

あなたがいる状況で実現してください。

PS。私は共有Reduxオブジェクトにほとんどの時間の要求データを格納することを選択します。