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

Question

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

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.

//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 本身的工作方式 - 你更新了一个状态变量，它使组件重新渲染，并且在每次渲染时你再次设置状态......所以你最终陷入无限循环。

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

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

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

const outletsListRef = useRef();

... 

outletsListRef.current = s;

尽管不确定为什么需要保存它而不重新渲染组件。

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

How to use useState hook to set value within FormDataConsumer

reactjs

final-form

react-final-form

react-admin