阵营 - 通过从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调用中获得的信息与{item.helloStackOverflow}。但是在同一个文件中，我也想输出其他内容，但是来自不同的Axios需求。

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

因此，这里是我的问题。如果我想输出'http://blablabla/customers'数据在我doorsItem什么是最简单的和“最好”的方式来做到这一点？因为我打得四处一点，当我点击下拉我只看到一个名，因为这个名字与一个ID相关联。但我只想要从'http://blablabla/customers'的所有名称下拉。

很抱歉，如果我的问题是乱了！但感谢阅读！

Answer 1

有两两件事你可以做：

它处理所有的请求，并将数据作为道具子组件

1. 制作容器组件。

2. 介绍共享存储对象，像终极版或MobX一样。

quote:

有时候你会想从Redux的状态移动反应状态（当 存储东西终极版变得笨拙）或周围的其他方法（当 多个组件需要有访问一些国家曾经是 地方）。

意识到你是在哪种情况。

PS。我选择将大部分时间的请求数据存储在共享的Redux对象中。