反应钩：超过最大深度

Question

我在React中使用了一个函数组件，当我使用useState钩子在返回中设置一个值时，我收到一个关于Maximum update depth exceeded的错误。

代码如下：

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 放在一个单独的函数中，而不是直接在返回中使用它，但我仍然看到相同的错误。有什么指导吗？我正在使用阿波罗客户端（这就是查询组件的用途。不确定我是如何导致这个被反复调用的。

我尝试用字符串替换操作员列表，它运行良好。所以这似乎是对象的问题。有人经历过吗？

Answer 1

如果您使用的是反应钩子，那么您也可以使用这里记录的apollo反应钩子。

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

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}