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}

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

---

我尝试用字符串替换运算符列表，效果很好。因此，对象似乎有问题。有人遇到过这种情况吗？

如果您使用的是react挂钩，那么您最好使用apollo react的挂钩

不要在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}

const TaskDetail=（道具）=>{
const[selectedOperatorForTime，setSelectedOperatorForTime]=useState（{}）；
const{loading，error，data}=useQuery（GET_API_VAL）；
useffect（（）=>{
//将SelectedOperator设置为数据更改时的时间
let operatorList={key1:data.value1，key2:data.value2}；
设置所选操作员的时间（操作员列表）；
}，[数据]；
返回(
{//代码的其余部分}

你试过使用useEffect吗？@Xzeta我刚试过，但无法让它工作。你不认为我可以更新useEffect中的状态吗？想法？很有道理，你正在改变你的状态作为回报（渲染）。为什么需要在那里设置selectedOperatorForTime？我认为代码中缺少一些上下文，但您可以在前面提到的

useEffect

中设置您的状态。从何处获得此值1和值2变量？谢谢！我在render中设置此值的原因是因为我从Apollo graphql查询组件收到的值。我需要设置状态所用的值。有什么方法可以做到这一点？我尝试创建一个函数，但也没有解决它。

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}