reactjs - React Hooks 必须在每个组件渲染中以完全相同的顺序调用

Question

我发现这个非常有趣的模式，您可以在其中启用基于应用于使用状态本身的三元方法的功能，但我在它说的地方遇到了这个问题

React Hook "useState" is called conditionally. React Hooks must becalled in the exact same order in every component render

import React, { useState } from "react";

const App = () => {
  const [enableFirstName, setEnableFirstName] = useState(false);
  const [name, setName] = enableFirstName ? useState("") : ["", () => {}]; #Error is here
  const [lastName, setLastName] = useState("");

  const handleChangeName = (e) => {
    setName(e.target.value);
  };

  const handleChangeLastName = (e) => {
    setLastName(e.target.value);
  };
  
  const handleEnableChange = (evt) => {
    setEnableFirstName(!enableFirstName);
  };

  return (
    <div>
    <h1>My name is: {enableFirstName ? name : ''} {lastName}</h1>
    <input type="checkbox" value={enableFirstName} onChange={handleEnableChange} />
    <input type="text" value={name} onChange={handleChangeName} />
    <input type="text" value={lastName} onChange={handleChangeLastName} />
</div>
  );
};

export default App;

Answer 1

React 不允许您有条件地调用钩子(Hook)。移除第二个 useState 中的条件:

const [enableFirstName, setEnableFirstName] = useState(false);
const [name, setName] = useState("");
const [lastName, setLastName] = useState("");

即使您不需要 name 因为 enableFirstName 是 false - 只需忽略它，保留空字符串并在必要时处理组件方法中的条件逻辑。