React js 使用钩子 useState 无限循环渲染？答案

【问题标题】：React js using hooks useState infinite loop rendering?React js 使用钩子 useState 无限循环渲染？
【发布时间】：2020-10-22 02:30:15
【问题描述】：

我想通过使用自定义钩子来更新我的组件当前状态，但是当我更新它时会显示无限循环渲染。通过使用 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>);
};

【问题讨论】：

标签： javascript reactjs typescript react-hooks

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

【讨论】：

【解决方案2】：

每次加载组件时，您都会调用setState({data})。尝试将setState 放入useEffect。

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

【讨论】：

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

发生的事情是每次组件渲染时，它都会调用您的查询并设置状态，导致组件再次重新渲染，这会调用您的查询并设置状态，导致组件再次重新渲染...使用 useEffect第二个参数为空数组将使您的组件在组件首次呈现时调用您的查询并仅设置一次状态。

【讨论】：