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*/}

因此，我可以使用{item.helloStackOverflow}输出我从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>

所以这是我的问题。如果我想在'http://blablabla/customers'中doorsItem输出数据，那么最简单，最“最好”的方法是什么？因为我玩了一下，当我点击下拉列表时，我只看到一个名称，因为该名称与ID相关联。但我只想要下载'http://blablabla/customers'中的所有名称。

对不起，如果我的问题很乱！但感谢阅读！

Answer 1

你可以做两件事：

制作处理所有请求的容器组件，并将数据作为道具传递给子组件。
介绍共享存储对象，如Redux或MobX。

quote:

有时你会想要从Redux状态转移到React状态（当时在Redux中存储东西变得笨拙）或者相反（当时更多组件需要访问以前的某个状态本地）。

了解您所处的情况。

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

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

1 个答案: