React js 使用鈎子 useState 無限循環渲染？

Question

我想通過使用自定義鈎子來更新我的組件當前 state 結果，但是當我更新它時顯示我無限循環渲染。 通過使用 useState() 鈎子。 我是反應鈎子的新手。

import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';

const Faq = props => {
  const [state, setState] = useState({})
  const talonProps = useFaq({
    query: getAllFaqs
  });
  const { data, error, loading } = talonProps;
  setState({data})

  console.log("Thank data", state)
  return (<div>its Working</div>);
};

Answer 1

不要直接在功能組件中設置狀態。 使用 onCompleted 事件：

import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';

const Faq = props => {
  const [state, setState] = useState({})
  const talonProps = useFaq({
    query: getAllFaqs,
    onCompleted: ({ data, error, loading }) => setState({data})
  });

  console.log("Thank data", state)
  return (
    <div>its Working</div>
  );
};

Answer 2

每次加載組件時，您都在調用setState({data}) 。 嘗試將setState放入useEffect中。

useEffect(() => {
setState({ data })
}, [data])

Answer 3

嘗試在 useEffect 掛鈎中運行以下代碼：

const talonProps = useFaq({
  query: getAllFaqs
});
const { data, error, loading } = talonProps;
setState({data})

那看起來像：

import React, { useMemo, useState, useReducer, useEffect, useCallback } from 'react';
import getAllFaqs from './faqQuery.graphql';
import { useFaq } from '../../peregrine/talons/Faq/useFaq';

const Faq = props => {
  const [state, setState] = useState({})
  
  useEffect(() => {
    const talonProps = useFaq({
      query: getAllFaqs
    });
     const { data, error, loading } = talonProps;
     setState({data})
     console.log("Thank data", state)
  }, [])

  return (<div>its Working</div>);
};

發生的事情是每次組件渲染時，它都會調用您的查詢並設置 state，導致組件再次重新渲染，這會調用您的查詢並設置 state，導致組件再次重新渲染...使用 useEffect 和第二個參數為空數組將使您的組件在組件首次呈現時調用您的查詢並僅設置一次 state。