useState 中的函数因为不是函数而出错

Question

我正在尝试使用 React Hooks，但我一定遗漏了一些东西。我没有得到以下任何设置函数的函数。

以此为参考：https://reactjs.org/docs/hooks-state.html

function Login() {
  const [user, pass, setUser, setPass, test, setTest] = useState();

  return (
    <LoginWrapper>
      <Branding brand={brand.brandName} />
      <FormWrapper>
        <Stack>
          <TextInput
            type="text"
            label="Username"
            onChange={() => setUser(this)}
          />
        </Stack>
        <Stack>
          <TextInput
            type="password"
            label="Password"
            onChange={() => setPass(this)}
          />
        </Stack>
        <Stack padding="0" align="right">
          <Button
            onClick={() => {
              setTest("user and pass");
            }}
          >
            Login
          </Button>
        </Stack>
      </FormWrapper>
    </LoginWrapper>
  );
}

Answer 1

通过使用 useState，您将得到一个数组，其中第一个元素是初始状态，第二个元素是 setter 状态。

您的 pass 实际上是 user 的 setter。

要像你想的那样使用多个值，你必须这样做：

const [user, setUser] = useState(...);
const [pass, setPass] = useState(...);
const [test, setTest] = useState(...);

或者作为替代方案，您可以将其用作具有单个 useState 的组合对象，但您必须将其与当前状态合并。

useState 中的函数因为不是函数而出错

functions in useState are erring as not a function

reactjs

react-hooks