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

Question

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

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

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

您可以查看此 CodeSanbox 中的代码

这是来自 API 的 json 数据：

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

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

希望这对你有用。

Answer 2

由于您使用的是 react-router push 方法。 它还能够将不同的 props 值与您的路径名一起发送，并且此推送仅适用于包含在 .

在您的情况下，您需要传递一个状态以及您的路线名称。 在下面的更改中，您必须在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 。

Answer 3

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

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

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

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