Отрисовано меньше хуков, чем ожидалось. Это может быть вызвано случайным ранним оператором возврата в React Hooks

Следующий компонент выдает мне это сообщение об ошибке во время выполнения, когда я пытаюсь отобразить таблицу как входное значение (редактируемое поле) с дополнительным предупреждением, приведенным ниже.

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>
  );
};

Это мой URL-адрес codeandbox — https://codesandbox.io/s/react-typescript-forked-hl179m?file=/src/ParameterTable.tsx

Я подозреваю, что это происходит потому, что я вызываю функцию EditableCell внутри хука useMemo, однако я не уверен, как это решить. Любая помощь/предложение подойдет, спасибо.

Я пытаюсь сделать таблицу Antd React Table редактируемыми полями, однако, когда я попытался сопоставить dataIndex как значение в отдельной функции для рендеринга в столбце, я получаю эту «Неперехваченную ошибку: визуализировано меньше крючков, чем ожидалось. Это может быть вызвано случайным ранним оператором return в React Hooks.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
119
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо того, чтобы вызывать EditableCell, как если бы это была обычная функция, оберните ее в React.createElement, чтобы React мог видеть, что это компонент (и, следовательно, внутри него могут вызываться хуки).

Изменить на

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

и

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

Также было бы неплохо избегать any, что противоречит цели использования TypeScript — везде, где у вас есть any, определите фактический тип, который будет там использоваться, и используйте вместо него этот тип.

Другие вопросы по теме