时间戳

首页 > 解决方案 > 反应钩子：超过最大深度

javascript - 反应钩子：超过最大深度

问题描述

我是 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，它工作正常。所以这似乎是一个对象的问题。有人经历过吗？

标签： javascriptreactjsreact-hooks

解决方案

如果您无论如何都在使用反应钩子，那么您不妨使用此处记录的 apollo-react 钩子。

不要Query在 JSX 中使用组件，而是在组件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}

推荐阅读