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

【问题标题】：React Hooks must be called in the exact same order in every component render在每个组件渲染中，必须以完全相同的顺序调用 React Hooks
【发布时间】：2021-04-30 08:05:49
【问题描述】：

我发现了这个非常有趣的模式，您可以根据应用在使用状态本身上的三元方法启用功能，但是我遇到了这个问题

有条件地调用 React Hook "useState"。 React Hooks 必须是在每个组件渲染中以完全相同的顺序调用

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;

【问题讨论】：

你想用enableFirstName ? useState("") : 达到什么目的？

标签： reactjs

【解决方案1】：

React 不允许有条件地调用钩子。去掉第二个useState中的条件：

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

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

【讨论】：