时间戳

首页 > 解决方案 > 如何使用 useState 挂钩在 FormDataConsumer 中设置值

reactjs - 如何使用 useState 挂钩在 FormDataConsumer 中设置值

问题描述

我必须使用useStatehook in设置一个 const 值FormDataConsumer。这是必要的，因为 const 的值只能在FormDataConsumer. 此 const 值将用作另一个组件的道具。我遇到的问题是下面的错误消息。做这个的最好方式是什么？提前致谢

错误：超过最大更新深度。当组件setState在内部重复调用componentWillUpdate或时会发生这种情况componentDidUpdate。React 限制了嵌套更新的数量以防止无限循环。

//const initialized here
    const [outletsList, setOutletsList] = useState([]);

 
//the place where the const must be set
   

                     <FormDataConsumer>
                      {({ formData, ...rest }) => {
                        //console.log(`formData: ${JSON.stringify(formData)}`)
                        //console.log(`rest: ${JSON.stringify(rest)}`)
        
                        let s = GetOutletsBySalesRep({
                          distributorkey: formData.distributorid,
                          salesrep: formData.salesrep,
                        });
        
                        **setOutletsList(s);**
                      }}
                    </FormDataConsumer>

标签： reactjsreact-adminreact-final-formfinal-form

解决方案

您得到的错误是因为 React 本身的工作方式 - 您更新了一个状态变量，该变量使组件重新渲染，并且在每次渲染时您再次设置状态......所以您最终陷入了无限循环。

要逃避它，您应该设置一个条件，在该条件下将更新状态，例如

if(outletsList.length === 0) setOutletsList(s);

或者使用引用通过useRef钩子更新它的当前属性来保存结果，因为此操作不会触发重新渲染。

const outletsListRef = useRef();

... 

outletsListRef.current = s;

虽然不确定为什么需要保存它而不是重新渲染组件。

推荐阅读