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

Question

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

在后端，登录凭据 are authenticated using "JWT authentication" .

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

您可以查看 this 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

希望这对您有用。