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

Question

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

错误：超过了最大更新深度。当组件在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本身的工作方式-您更新了一个状态变量，该变量使组件重新渲染，并且在每次渲染时都会重新设置状态。。。所以你最终会陷入一个无休止的循环。

要逃离它，你应该设置一个状态更新的条件，例如

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

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

const outletsListRef = useRef();
... 
outletsListRef.current = s;

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