时间戳

首页 > 解决方案 > React js 使用钩子 useState 无限循环渲染？

javascript - React js 使用钩子 useState 无限循环渲染？

问题描述

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

标签： javascriptreactjstypescriptreact-hooks

解决方案

不要直接在功能组件中设置状态。使用 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>
  );
};

推荐阅读