当我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中意外的提前返回语句造成的.’

推荐答案

不是像调用普通函数一样调用EditableCell,而是将其包装在React.createElement中,以便Reaction可以看到它是一个组件(因此可以在其中调用钩子).

更改为

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

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

It would also be a good idea to avoid any, which defeats the purpose of using TypeScript - wherever you have an any, identify the actual type that'll be used there, 和 use that type instead.

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

react 路由导航不工作,但手动路由工作

REACT路由DOM根据参数呈现不同的路由

如何创建react router v6的自定义子路由?

Reaction Google Maps API无法获取标题

当useEffect和onClick处理程序都调用useCallback函数时,有没有办法对useEffect产生额外的影响?

Reaction路由-如何在布局路由内呈现&q;/:id&q;路由

Gitlab CI和VITE环境变量出现问题

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

面临 React 模式中点击外部条件的问题

Redux 工具包不更新状态

我可以同时使用 Gatsby 和 NEXT.JS 吗?

如何在我的自定义主题中样式化MUI TreeItem组件

当`useSelector`回调中的属性值更新时,将会使用更新后的值吗?

如何在 React 过滤器中包含价格过滤器逻辑?

在 Nextjs13 应用程序目录中呈现从 supabase 获取的数据

react 事件顺序

从一个获取 axios 请求(ReactJS)中删除默认参数

刷新页面时状态改变问题

如何在 MUI 数据网格中的 renderCell 组件之间传递状态