Следующий компонент выдает мне это сообщение об ошибке во время выполнения, когда я пытаюсь отобразить таблицу как входное значение (редактируемое поле) с дополнительным предупреждением, приведенным ниже.
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.
Вместо того, чтобы вызывать EditableCell
, как если бы это была обычная функция, оберните ее в React.createElement
, чтобы React мог видеть, что это компонент (и, следовательно, внутри него могут вызываться хуки).
Изменить на
render = {(dataIndex) => <EditableCell initialValue = {dataIndex} />}
и
const EditableCell = ({ initialValue }: { initialValue: any }) => {
Также было бы неплохо избегать any
, что противоречит цели использования TypeScript — везде, где у вас есть any
, определите фактический тип, который будет там использоваться, и используйте вместо него этот тип.