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

Question

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

错误：超过最大更新深度。 当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。 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>

Answer 1

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

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

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

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

const outletsListRef = useRef();

... 

outletsListRef.current = s;

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