Question

我正在使用React-router-dom在组件之间切换，如下所示。

<Router>
        <div>
          <Header />
          <NavigationBar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/home" component={Home} />
            <Route exact path="/about" component={About} />
            <Route path="/concepts" component={ConceptBox} />
            <Route path="/products" component={ProductBox} />
            <Route component={NotFound} />
          </Switch>
          <Footer />
        </div>
      </Router>

在<Header />组件中，我有一个用户可以登录的登录部分。这将连接到MongoDB并返回包含数组的响应。

onSubmit = () => {
  if (this.state.email.trim() !== "" &&
  this.state.password.trim() !== "") {
    axios.post("http://localhost:3001/api/login", { email: this.state.email, password: this.state.password })
      .then((response) => {
        console.log(response)

我的快速登录路线如下：

router.route('/login')
.post(function(req, res){
  var email = req.body.email;
  var password = req.body.password;

  Member.authenticate(email, password, function (error, user) {
        if (error || !user) {
          var err = new Error('Wrong email or password.');
          res.send(err);

        } else {
          console.log("I have your response now");
          return res.send(user)

        }
  });

我想在Home组件的响应中使用此数组。我很困惑我是否应该使用reduxJS或cookie来存储这些信息并在不同的组件中检索它？还是有一种巧妙的方式来检索我的

Answer 1

您可以将此数组存储为主要组件的状态的一部分。这称为Lifting state up。

因此，包含路由的组件将具有将数组作为参数接收并更新状态的函数。此状态将作为道具传递给您的Home组件。

您的console.log(response)将被此函数调用替换。

希望这有帮助！：）

如何将标题从头部组件传递到另一个不相关的容器

1 个答案: