如何在反应中将布尔值从一个组件传递到另一个组件？

Question

在 useState 默认值设置为 false 并将其发送到登录组件。但是登录组件没有获取值（用户，setUser）。

import Login from "../Routes/Login";

const useAuth = () => {
  const [user, setUser] = useState(false);
  return (
    <div>
      <Login user={user} setUser={setUser}></Login>
    </div>
  )
}
export default useAuth;

当我点击“登录”按钮时，它导致了一个名为“Uncaught TypeError: setUser is not a function”的错误。单击登录按钮时，我想将“用户”的值从 false 更改为 true。

const Login = ({ user, setUser }) => {
  
  console.log(user);

  return (
    <div>
      <button onClick={() => { setUser(true) }}>Login</button>
    </div>
  );
}
export default Login;

Answer 1

我无法重现您提到的问题。这是下面的代码沙箱 link： https://codesandbox.io/s/wizardly-pine-4edci7?file=/src/App.js

您用于 useAuth 组件的命名约定不正确。从命名约定来看，它似乎是一个自定义挂钩，但它是一个组件。

因此，您应该使用以下命名约定 UseAuth。它在上面给定的 codesandbox link.

中工作正常

补充说明：reactjs 中的所有自定义钩子都需要以 use 关键字作为前缀。因此，我建议将组件的名称从 useAuth 一起更改为 Auth。

如何在反应中将布尔值从一个组件传递到另一个组件？

How to pass boolean value from one component to another in react?

javascript

reactjs

react-props