javascript - react Hook 形式 : Making append() Asynchronous

Question

React Hook Forms 在 useFieldArray 上提供了一个方法 append() 来向动态字段数组添加更多行。

我可以使用 append()。但是，我想在调用 append() 后立即执行另一个函数。但这并没有发生。相反，下一个函数在 append() 完成之前被调用。

我怎样才能改变这种行为并确保仅在 append() 完成后才调用下一个函数？

https://react-hook-form.com/api/usefieldarray

在下面的例子中:

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

                    }}>

在上面的例子中，字段的长度保持不变。它不会增加。我该如何解决这个问题？

Answer 1

在幕后，append 依赖于对 useState setter 的调用(参见 the source )，这意味着 fields 是一个useState 状态值，您只会在下一次渲染时看到更新后的值。

要执行响应状态更改的效果，请使用 useEffect Hook 。您可以阅读更多相关信息 here .在你的情况下，你想要做类似的事情

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 2 []

初始渲染，然后

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

一旦你点击按钮追加一个新字段。如果您需要区分初始渲染和后续更新，您可以检查 fields 的值是否已从其初始值(可能是 [])发生变化。