反应钩子：超过最大深度答案

【问题标题】：React hooks: maximum depth exceeded反应钩子：超过最大深度
【发布时间】：2020-08-29 04:27:51
【问题描述】：

我是 React 中的一个功能组件，当我使用 useState 钩子在返回值中设置一个值时，我收到有关超出最大更新深度的错误。

代码如下：

const TaskDetail = (props) => {
    const [selectedOperatorForTime, setSelectedOperatorForTime] = useState({})
    return (
       <div >  
            <Query query={GET_API_VAL}>
              {({ loading, error, data }) => {
                  let operatorList = {key1: data.value1, key2: data.value2}

                  setSelectedOperatorForTime(operatorList);
       {//rest of the code}

我收到以下错误

Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我尝试将 setState 放在单独的函数中，而不是将其直接放在返回中，但我仍然看到相同的错误。有什么指导吗？我正在使用 Apollo 客户端（这是 Query 组件的用途。不确定我是如何导致它被重复调用的。

我尝试用字符串替换 operatorList，它工作正常。所以这似乎是一个对象的问题。有人经历过吗？

【问题讨论】：

你试过使用 useEffect 吗？
@Xzeta 我刚刚尝试过，但无法正常工作。并且不认为我可以更新 useEffect 中的状态吗？想法？
这是有道理的，你正在改变你的状态作为回报（渲染）。为什么你需要在那里设置你的 selectedOperatorForTime？
我认为我们在代码中遗漏了一些上下文，但您可以在 useEffect 中设置您的状态，如上所述。你从哪里得到这个 value1 和 value2 变量？
谢谢！我在 render 中设置它的原因是因为我从 Apollo graphql Query 组件收到的值。我需要该值来设置状态。有什么方法可以做到这一点？我尝试创建一个函数，但也没有解决它。

标签： javascript reactjs react-hooks

【解决方案1】：

如果你仍然在使用 react 钩子，你不妨使用 apollo-react 的钩子记录 here。

不要在 JSX 中使用 Query 组件，而是在组件顶部使用 useQuery，如下所示：

const { loading, error, data } = useQuery(GET_API_VAL);

这也可能消除对单独的useState 的需要，因为它始终包含当前数据。

您的具体示例，没有其他更改，将如下所示：

const TaskDetail = (props) => {
    const [selectedOperatorForTime, setSelectedOperatorForTime] = useState({});
    const { loading, error, data } = useQuery(GET_API_VAL);

    useEffect(() => {
        // Set selectedOperatorForTime whenever the data changes
        let operatorList = {key1: data.value1, key2: data.value2};
        setSelectedOperatorForTime(operatorList);
    }, [data]);

    return (
       <div >
       {//rest of the code}

【讨论】：