如何在ReactJS中使用API传递数据从一个组件到另一个组件？

Question

在React中，我们可以使用props从一个组件传递数据到另一个组件，但我想知道如何在发出API请求时从一个组件传递数据到另一个组件。

在后端，登录凭据使用“JWT身份验证”进行身份验证。

如何在用户登录时传递用户名？ 当用户登录时，我的页面应该显示“欢迎”。

您可以查看this CodeSanbox中的代码。

以下是来自API的JSON数据：

{
  item: [
    {
      "id": "145741863",
      "firstName": "ABCDEF",
      "email": "[e-mail]",
      "password": "Aertyuio",
    }
  ]
}

- Arunya

Answer 1

你可以像这样做：

axios
      .post(`/api/Login/auth`, data, {
        headers: { "Content-Type": "application/json" }
      })
      .then(res => {
        console.log(res);
        this.props.history.push("/Welcome", { ...res });
      })
      .catch(err => {
        console.log(err.response.data.message);
        var res = err.response.data.message;
        this.setState({ errorMsg: res });
      });

当您将JSON Web Token作为数据发送时，可以通过以下方式访问它：

this.props.data.item[0].firstName

希望这对你有用。

- Muhammad Zeeshan

---

嗨，我得到的值是未定义的。你能帮我看看哪里出了问题吗？我已经在查询中更新了JSON数据。 - Arunya

查找您通过axios接收到的响应。并相应地访问该属性。我还更新了我的答案。也尝试一下那个。 - Muhammad Zeeshan

Answer 2

由于您正在使用react-router推送方法。 它还具有沿着您的路径名发送不同道具值的能力，并且此推送仅适用于包装在中的组件。

在您的情况下，您需要在路由名称旁传递状态。 在history.push中，您必须传递状态。

this.props.history.push("/Welcome", { ...res }); 在 Login.js.

然后通过this.props.location.state.firstName在Welcome.js中获取响应值。

附上文件供您参考 - https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md

此外，我还附上了关于history.push的基本演示 - https://codesandbox.io/s/broken-flower-hbglx。

- Tharun208

---

我得到了“undefined”的值。你能帮我看看哪里出了问题吗？我已经在查询中更新了JSON数据。 - Arunya

你能否检查一下你的响应是否通过 this.props.location.state 传递？如果它是未定义的，那么请检查一下你的 history.push。 - Tharun208

Answer 3

一个可能的解决方案是使用一些状态管理库，例如redux。

否则，您需要有一个组件来执行这个获取数据的操作，并且这个组件应该是至少受到API数据更改影响的组件的共同祖先。

我的目标是在用户登录时传递用户名。当用户登录后，它应该显示“欢迎用户名”。

作为更通用的解决方案，您可以创建一个HOC，它将执行获取API数据的操作并返回一个新组件，其中包含从API注入为props的数据。

- laxman