首页 > 解决方案 > 如何在 react-admin 中的按钮单击回调中调用反应钩子,或者该怎么做?

问题描述

useGetOneReact-admin 提供了类似于和的钩子,useCreate用于使用 rest 调用读取和写入数据。

从不同来源收集一些数据后,我需要在按钮回调函数中创建新记录。不幸的是,不允许从回调中调用反应钩子。那么我能做些什么呢?

我的问题是我仍然不明白 REACT 和 final-form 是如何工作的。我来自 ASP.NET 角落,所以我熟悉控件的概念,这显然是非常不同的。

下面的代码在运行时抛出以下错误:

错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一:
1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
2. 你可能违反了 Hooks 规则
3. 你可能有多个 React 副本同一个应用程序请参阅/链接已删除/有关如何调试和解决此问题的提示。

错误发生在GetMeasurementTemplate()其中使用另一个挂钩getOne()来获取记录。

const createMeasurementJob = ( record ) => {
        var counter = 0;
        if (record.freimessen.messungen.length > 0) {
            record.freimessen.messungen.forEach(element => {
                counter++;
                var job = {};
                job.internalOrderNumber = "TEST" + record.id + "-" + counter;
                const measurement = GetMeasurementTemplate(element.ort);
                job.locationId = measurement.location;
                job.substanceIds = measurement.substances;
                job.comment = element.kommentar;
                job.assigneeId = element.gaspruefer;
                job.date = record.arbeit.ab;

                // #### error: invalid hook call ####
                const [create, { loading, error }] = useCreate('jobs', job);  //* BANG! *//
                if (error) { return false }
            })
        }
        return true;
    };

   const GetMeasurementTemplate = (id) => {
      // #### error: invalid hook call ####
      const { data, loading, error } = useGetOne('LocationSubstanceMapping', id);
      if (loading) { return <LinearProgress />; }
      if (error) { return <p>ERROR</p>; }
      return data;
    };

    const CSEButton = ({ handleSubmitWithRedirect, ...props }) => {
        const form = useForm();
        var formdata = form.getState().values;
        const handleClick = useCallback(() => {

            createMeasurementJob(formdata)
        }, [form]);

        return <SaveButton {...props} handleSubmitWithRedirect={handleClick} />;
    };

标签: reactjsmaterial-uireact-adminreact-final-form

解决方案


推荐阅读