React hooks：React 检测到 NodeDetails 调用的 Hooks 的顺序发生了变化。 / 渲染了比之前渲染更多的钩子

Question

我正在使用在列表中呈现的自定义 <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 的正确使用方法是什么才不会报错？

Answer 1

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

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

改变一下看看：

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

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 render

reactjs

tsx

use-state