當我嘗試將表呈現為輸入值（可編輯欄位）時，以下組件在運行時向我拋出此錯誤訊息，并帶有下面給出的附加警告。
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 中意外的提前回傳陳述句引起的
uj5u.com熱心網友回復：
不要像呼叫EditableCell普通函式那樣呼叫它，而是將其包裝起來，React.createElement以便 React 可以看到它是一個組件（因此可以在其中呼叫鉤子）。
改成
render={(dataIndex) => <EditableCell initialValue={dataIndex} />}
和
const EditableCell = ({ initialValue }: { initialValue: any }) => {
避免使用 也是一個好主意any，這違背了使用 TypeScript 的目的 - 無論您有什么any，請確定將在那里使用的實際型別，然后改用該型別。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537118.html