React Hook Form 重新渲染太多。 React 限制渲染次数以防止无限循环

Question

我正在尝试观看一个名为 party 的字段。选择这些字段后，需要呈现产品列表。我正在使用 react hook 表单，其中我使用 watch hook 来订阅更改。

<FormProvider {...methods}>
   <form onSubmit={handleSubmit(onSubmit)}>
   <Select
       ref={ref}
       options={partyOptions}
       value={partyOptions.find(
              (c) => c.value === value
       )}
       onChange={(val: any) => onChange(val.value)}
       name={name}
        />
       )}
      <div className="card-body row">
        <ProductContext.Provider value={[product, setProduct]}>
            <ProductList partyId={partyId} />
        </ProductContext.Provider>
      </div>
</form>

在 productlist 组件上，我将 partyId 作为 props 传递并尝试根据 partyId

访问 API

export function ProductList({ partyId }: { partyId: any }) {
const { control } = useFormContext(); // retrieve all hook methods

const [productOptions, setProductOptions] = useState([] as any);
const productQuery = useQuery("products", () => searchProduct(partyId), {
    enabled: partyId !== undefined,
});

if (productQuery.isFetched) {
  setProductOptions(
    productQuery.data.data.map((d: any) => ({
     value: d.id,
     label: d.name,
   }))
  );
}

我得到 Too many re-renders. React limits the number of renders to prevent an infinite loop. 有什么解决方案可以避免多次渲染吗？

Answer 1

您必须添加更多逻辑，setProductOptions 在每个反应渲染时被调用。例如，您可以使用 useEffect 仅调用一次 setProductOptions。

export function ProductList({ partyId }: { partyId: any }) {
   const { control } = useFormContext(); // retrieve all hook methods

  const [productOptions, setProductOptions] = useState([] as any);
  const productQuery = useQuery("products", () => searchProduct(partyId), {
      enabled: partyId !== undefined,
  });


  useEffect(() => {
    if (productQuery.isFetched) {
      setProductOptions(
        productQuery.data.data.map((d: any) => ({
            value: d.id,
            label: d.name,
          })
        )
     );
   }
  }, [productQuery.isFetched, setProductOptions]);

Answer 2

你的问题在这里：

  if (productQuery.isFetched) {
    setProductOptions(
      productQuery.data.data.map((d: any) => ({
        value: d.id,
        label: d.name,
      })
    )
  );

每次渲染组件时，它都会触发另一个状态更新setProductOptions，然后导致另一个渲染，循环无限重复。考虑改用 useEffect 钩子：

  useEffect(() => {
    if (productQuery.isFetched) {
      setProductOptions(
        productQuery.data.data.map((d: any) => ({
          value: d.id,
          label: d.name,
        })
      )
    }
  }, [productQuery.isFetched);

有关 useEffect 的更多信息可在此处获得：https://reactjs.org/docs/hooks-effect.html

React Hook Form 重新渲染太多。 React 限制渲染次数以防止无限循环

React Hook Form Too many re-renders. React limits the number of renders to prevent an infinite loop

javascript

reactjs

react-hooks

react-hook-form

react-query