React hooks：React 检测到 NodeDetails 调用 Hooks 的顺序发生了变化。 / 比上一次渲染时渲染了更多的钩子答案

【问题标题】：React hooks: React has detected a change in the order of Hooks called by NodeDetails. / Rendered more hooks than during the previous renderReact hooks：React 检测到 NodeDetails 调用 Hooks 的顺序发生了变化。 / 比上一次渲染时渲染了更多的钩子
【发布时间】：2022-01-21 21:49:01
【问题描述】：

我正在使用我在列表中呈现的自定义 <CompositeInput> 组件。

      <div className="p-6">
        {nodeProperties.map(({ key, value }) =>
          CompositeInput({
            value: value,
            label: key,
            key: key,
            onChange: editing ? (x) => console.log(x) : undefined,
          })
        )}
        <div className="flex w-full pt-2">{bottomBar}</div>
      </div>

在这个列表中，我调用useState 来保存组件的输入状态：

const DataPropertyInput = (
  value: DataPropertyValue,
  onChange?: (newData: DataPropertyValue) => void
) => {
  const [updatedValue, setValue] = useState(value);
  return matchExhaustive(updatedValue, {
    StringWrapper: (string) => (
      <input
        onChange={(ev) => {
          setValue(DataPropertyValue.StringWrapper(ev.target.value));
          onChange?.(DataPropertyValue.StringWrapper(ev.target.value));
        }}
        disabled={!onChange}
        className="p-1 bg-transparent mr-2"
        value={string}
      />
    ),
    DateTimeWrapper: (strData) => <div> "datepicker"</div>,
    Unknown: () => <div> Special property type </div>,
    IntWrapper: (int) => <div> NUMBER INPUT </div>,
    EmptyWrapper: () => <div>Empty </div>,
    ManyOfMany: () => <div>Dropdown here </div>,
  });
};

当我添加另一个 nodeProperty 时，调用的钩子的数量显然会发生变化。

什么是使用 React useState 的正确方法，这样它就不会抱怨？

【问题讨论】：

标签： reactjs use-state tsx

【解决方案1】：

钩子规则之一是： 确保对于给定组件，挂钩的调用次数始终相同。

我认为问题的出现是因为您调用的是function ()，而不是组件。现在，CompositeInput 中的钩子与其父组件相关联。

改变一下看看：

{nodeProperties.map(({ key, value }) =>
          <CompositeInput 
            value={value}
            label={key}
            key={key}
            onChange={editing ? (x) => console.log(x) : undefined} />
  
        )}

【讨论】：