如何使用 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;

雖然不確定為什么需要保存它而不是重新渲染組件。