Javascript 如何在reactjs中使用API时将数据从一个组件传递到另一个组件

在React中，我们可以使用

props

将数据从一个组件传递到另一个组件，但我想知道如何在发出API请求时将数据从一个组件传递到另一个组件

在后端，登录凭据

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

您可以在中查看代码

以下是API中的json数据：

{
  item: [
    {
      "id": "145741863",
      "firstName": "ABCDEF",
      "email": "qwerty@yahoo.com",
      "password": "Aertyuio",
    }
  ]
}

---

您可以这样做：

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

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

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

---

希望这对您有用。

因为您使用的是react路由器推送方法。它还能够将不同的道具值与路径名一起发送，并且此推送仅适用于包装在中的组件

在您的情况下，您需要在传递路由名称的同时传递一个状态。在下面的更改中，您必须在

历史记录中随路线名称一起传递状态。按

this.props.history.push（“/Welcome”，{…res}）

在

Login.js

上

并使用

this.props.location.state.firstName

在

Welcome.js

上获取响应值

附上该文件以供参考-

---

此外，我还附上了一个基本的history.push演示-。

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

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

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

---

作为一个更通用的解决方案，您可以创建一个用于获取API内容的组件，并返回一个新组件，其中包含作为道具注入的API中的数据。

我正在获取未定义的值。你能帮我找出哪里出了问题吗。我已经更新了查询中的json数据。您是否可以检查您的响应是否来自

this.props.location.state

。如果它是未定义的意思，则检查您的

历史记录。推送
嗨，我得到的值是未定义的。你能帮我找出哪里出了问题吗。我已经在queryLook中更新了json数据，用于您通过axios收到的响应。并相应地访问该属性。我也更新了我的答案。也试试看。