Javascript React钩子窗体：使append（）异步

React Hook Forms在

useFieldArray

上提供了一个方法

append（）

，用于向动态字段数组添加更多行

我可以使用

append（）

。但是，我想在调用

append（）

后立即执行另一个函数。但事实并非如此。相反，在

append（）

完成之前调用下一个函数

如何更改此行为并确保只有在完成append（）后才能调用下一个函数

在以下示例中：

onClick={() => {
                    console.log('fields 1', fields)
                    append({
                      item: 
                        {
                          id: 1, 
                          name: 'test'
                        }
                    });
                    console.log('fields 2', fields)

                    }}>

---

在上面的示例中，字段的长度保持不变。它不会增加。如何解决此问题？

在引擎盖下，

append

依赖于对

useState

设置器的调用（请参见），这意味着

字段

是一个

useState

状态值，您只能在下一次渲染时看到更新后的值

要执行响应状态更改的效果，请使用

useffect

hook。你可以阅读更多关于它的内容。在你的情况下，你会想做

import React, { useEffect } from 'react';
import { useFieldArray } from 'react-hook-form';

const MyComponent = () => {
  const { fields, append } = useFieldArray(...);

  useEffect(() => {
    // this callback will run once on initial render and
    // then again whenever `fields` is updated
    console.log('fields 2', fields);
  }, [fields]);

  return (
    <div>
      <button onClick={() => {
          console.log('fields 1', fields);
          append({ item: { id: 1, name: 'test' } });
        }}>
        Click me
      </button>
    </div>
  );
};

在初始渲染时，然后

fields 1 []
fields 2 [{ id: 1, name: 'test' }]

---

单击按钮以附加新字段后。如果需要区分初始渲染和后续更新，可以检查

字段的值是否已从初始值更改（可能是
[]
）。
谢谢。这真的很有帮助。但是，即使用户更新表单中某个字段的值，字段中的任何更改都可以调用useffect？如果我想让它只在新对象添加字段时运行，而不是在其他情况下运行，该怎么办。这可能吗？实际上我试过了，只有当一个新对象添加到数组中时，它才会更新。所以，它对我很有效。但我只是想确保它确实是这样工作的。另外，有可能不在初始渲染时运行它吗？您是正确的，它只会在
字段的外部形状更改（添加或删除元素时）时运行，而不会在修改字段的值时运行。如果要避免在初始渲染时运行，可以跟踪是否已在ref中渲染，并基于此有条件地运行（请参见）。
fields 1 []
fields 2 [{ id: 1, name: 'test' }]