未处理的拒绝 (TypeError)：params.setLoggedIn 不是函数

Question

我在将 SetState 从父级传递给子级时出错。

父组件Index.js

const Index = () => {
  const [loggedIn, setLoggedIn] = useState(false);
 
  return (
    <Router>
      <NavBar user={loggedIn} />
      <Switch>
        <Route path="/" exact component={QuestionList} />
        <Route path="/register" component={Register} />
        <Route path="/login" component={Login} setLoggedIn={setLoggedIn} />
        <Route path="/addquestions" component={QuestionForm} />
        <Route path="/viewquestions" exact component={QuestionList} />
        <Route path="/viewquestions/:id" component={QuestionList} />
        <Route path="/logout" component={Logout} />
      </Switch>
    </Router>
  );
};

子组件

const Login = (params) => {
  const initialCredentials = {
    email: "",
    password: "",
  };
  const [credentials, setCredentials] = useState(initialCredentials);
  const [isValid, setIsValid] = useState(false);

  const handleInputChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
  };

  const handleFinalSubmit = (e) => {
    e.preventDefault();   
    validateUser(credentials);
  };

  const validateUser = async (data) => {
    const result = await loginUser(data);
    if (result.data.success) {
      setToken(result.data.token);
      setIsValid(true);    
      params.setLoggedIn(true);
    }

    return <Redirect to={{ pathname: "/login" }} />;
  };

  if (isValid) return <Redirect to="/" />;

  return (
    <div className="container border border-gray mt-5 rounded">
      <h4 className="mt-3 text-info">Login</h4>
      <form action="/" className="mt-3" onSubmit={handleFinalSubmit}>
        <div className="form-group">
          <input
            type="text"
            className="form-control border border-info"
            id="formGroupExampleInput2"
            placeholder="Email"
            name="email"
            value={credentials.email}
            onChange={handleInputChange}
          />
          <br></br>
          <input
            type="password"
            className="form-control border border-info"
            id="formGroupExampleInput2"
            placeholder="**********"
            name="password"
            value={credentials.password}
            onChange={handleInputChange}
          />
          <br></br>

          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
  );
};

我在子组件中有一个登录表单。当我提交表单时，我将验证用户。一旦用户有效。然后我将更新父组件的状态。同时更新父 setLoggedIn 状态。我收到以下错误

错误

可能是什么问题？

Answer 1

为什么？

您正在将 props 直接传递给路由组件而不是登录组件

<Route path="/login" component={Login} setLoggedIn={setLoggedIn} />

解决方案

您可以在子组件 props 中传递 setLoggedIn props 而不是路由组件

<Route path="/login" component={(routeProps)=><Login {...routeProps} setLoggedIn={setLoggedIn}/>}  />

Answer 2

您需要将 props 传递给组件而不是 Route Component:

<Route path="/login" component={<Login setLoggedIn={setLoggedIn} />} />;

还有一个提示是在 login 组件中使用 props 而不是 params，因为它可能会与 react-router-dom 中的 params 混淆 location 对象

未处理的拒绝 (TypeError)：params.setLoggedIn 不是函数

Unhandled Rejection (TypeError): params.setLoggedIn is not a function

javascript

reactjs

react-hooks

react-state