React Hook Form 重新渲染過多。 React 限制渲染次數以防止無限循環

Question

我正在嘗試觀看一個名為派對的領域。 選擇產品的那些字段列表后，將需要呈現。 我正在使用反應鈎子形式，我使用手表鈎子訂閱更改。

<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 作為道具傳遞並嘗試根據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. 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,
      })
    )
  );

每次渲染組件時，它都會觸發另一個 state 更新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