当我try 将表呈现为输入值(可编辑字段)时,下面的组件在运行时抛出此错误消息,并给出以下附加警告.
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>
);
};
这是我的代码Sandbox URL-https://codesandbox.io/s/react-typescript-forked-hl179m?file=/src/ParameterTable.tsx
我怀疑这是因为我在useMemo钩子中调用了函数EditableCell,但是我不确定如何解决这个问题.任何帮助/建议都可以,谢谢.
我试图使Antd Reaction表成为可编辑的字段,但是,当我试图将dataIndex映射为单独函数中的值以呈现在列中时,我得到了这个‘未捕获的错误:呈现的钩子比预期的少.这可能是由Reaction Hooks中意外的提前返回语句造成的.’