Javascript React-将数据从Axios req传递到另一个组件

我想将数据从单独组件中的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} />)

我想要输出的数据可以在这个组件中找到：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),
    })
  })

this.serverRequest=axios
.get（'http://blablabla/customers')  {
//重新加载状态
这是我的国家({
物件，
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>

constusersitem=（{item}）=>


{`${item.name}${item.name}`}

这是我的问题。如果我想从

输出数据http://blablabla/customers“

在我的

doorsItem

最简单和“最好”的方法是什么？因为我玩了一会儿，当我点击下拉列表时，我只看到一个名字，因为这个名字与一个ID关联。但是我只想有一个包含

中所有名字的下拉列表http://blablabla/customers“

---

对不起，如果我的问题是混乱的！但是谢谢你的阅读

您可以做两件事：

使容器组件处理所有请求，并将数据作为道具传递给子组件

引入共享存储对象，就像Redux或MobX一样

有时，您需要从Redux状态移动到React状态（当 在Redux中存储某些内容会变得笨拙）或者相反（当 更多的组件需要能够访问以前的状态 本地的）

了解你所处的情况

---

另外，我大多数时候选择将请求数据存储在shared Redux对象中。

谢谢回复。我不太确定如何使用共享的Redux对象，呵呵。如果您被限制为React状态，那么请记住React具有单向数据流-这意味着如果您希望两个组件共享相同的数据，那么它们必须具有将数据传递给它们的共同祖先。应该有帮助：

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),
    })
  })

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>