渲染的钩子比预期的少。这可能是由 React Hooks 中意外的提前返回语句引起的答案

【问题标题】：Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks渲染的钩子比预期的少。这可能是由 React Hooks 中意外的提前返回语句引起的
【发布时间】：2022-11-20 01:36:15
【问题描述】：

当我尝试将表呈现为输入值（可编辑字段）时，以下组件在运行时向我抛出此错误消息，并带有下面给出的附加警告。

Warning: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. You can only call Hooks at the top level of your React function.

这是我的代码，

const EditableCell = (initialValue: any) => {
  const [value, setValue] = React.useState(initialValue);

  const onChange = (e: any) => {
    setValue(e.target.value);
  };

  React.useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  return <Input type="text" value={value} onChange={onChange} />;
};


const ParameterTable: React.FC<ParameterTableProps> = () => {
  const {
    decisionMetadataInput: input,
    decisionMetadataOutput: output,
    paramList
  } = testData.data;
  const inMeta = React.useMemo(() => input?.metadata ?? [], [input]);
  const outMeta = React.useMemo(() => output?.metadata ?? [], [output]);
  const allColumn = React.useMemo(
    () =>
      [...inMeta, ...outMeta].map((meta) => (
        <Column
          title={
            <>
              <span>{meta.field}</span>
              <br />
              <Typography.Text italic>({meta.type})</Typography.Text>
            </>
          }
          key={meta.field}
          dataIndex={["data", meta.field]}
          render={(dataIndex) => EditableCell(dataIndex)}
        />
      )),
    [inMeta, outMeta]
  );
  const datasource = React.useMemo(
    () =>
      paramList.map((param) => {
        const inParam = param?.paramInput?.param ?? [];
        const outParam = param?.paramOutput?.param ?? [];
        const data = [...inParam, ...outParam].reduce(
          (prev, current) => ({
            ...prev,
            [current.field]: current.value
          }),
          {}
        );
        return { data, num: param.paramOrder };
      }),
    [paramList]
  );

  return (
    <Table dataSource={datasource} rowKey="num" pagination={false}>
      <Column title="F" dataIndex="num" />
      {allColumn}
    </Table>
  );
};

这是我的 codesandbox URL - https://codesandbox.io/s/react-typescript-forked-hl179m?file=/src/ParameterTable.tsx

我怀疑发生这种情况是因为我在 useMemo 挂钩中调用了函数 EditableCell，但是我不确定如何解决这个问题。任何帮助/建议都可以，谢谢。

我正在尝试将 Antd React 表设为可编辑字段，但是当我尝试将 dataIndex 映射为单独函数中的值以在列中呈现时，我收到此“未捕获错误：呈现的钩子少于预期”。这可能是由 React Hooks 中意外的提前返回语句引起的

【问题讨论】：

标签： reactjs react-native react-hooks rxjs react-tsx

【解决方案1】：

不要像调用普通函数那样调用 EditableCell，而是将它包装在 React.createElement 中，这样 React 就可以看到它是一个组件（因此可以在其中调用钩子）。

改成

render={(dataIndex) => <EditableCell initialValue={dataIndex} />}

和

const EditableCell = ({ initialValue }: { initialValue: any }) => {

避免使用 any 也是一个好主意，这违背了使用 TypeScript 的目的 - 无论您有 any，请确定将在那里使用的实际类型，然后改用该类型。

【讨论】：