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

【问题标题】：React Hook Form Too many re-renders. React limits the number of renders to prevent an infinite loopReact Hook Form 重新渲染过多。 React 限制渲染次数以防止无限循环
【发布时间】：2023-03-08 15:18:01
【问题描述】：

我正在尝试观看一个名为派对的领域。选择这些字段后，将需要呈现产品列表。我正在使用 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. 有没有不渲染多次的解决方案？

【问题讨论】：

看起来一旦productQuery.isFetched 变为真，您将无限调用setProductOptions。您需要添加更多逻辑以确保仅在需要时设置状态。

标签： javascript reactjs react-hooks react-hook-form react-query

【解决方案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]);

【讨论】：

【解决方案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

【讨论】：

你为什么要使用Effect呢？这显然是不应该存储的派生状态，而是派生出来的……