[英]stop infinite loop in useEffect
我在代码下面运行无限循环,基本上我尝试将道具的 state 与本地 state 同步
const SomeComponent = ({ ids = [] }) => {
const selectedIds = useStore(reduxStore);
const [_, setSelectedIds] = useState(selectedIds);
useEffect(() => {
setSelectedIds(ids);
}, [ids]);
};
我不能做if(ids.length) setSelectedIds(ids)
因为它们将是 setSelectedIds 为 [] 的情况,我也想同步它。 但是我得到了无限循环。
您的问题是您将{ ids = [] }
设置为[]
作为默认值。 如果您不将ids
传递给SomeComponent
,它将继续将ids
初始化为新的数组[]
,这将导致连续重新渲染
代表你的问题
const { useEffect, useState } = React const SomeComponent = ({ ids = [] }) => { const [_, setSelectedIds] = useState([]); useEffect(() => { setSelectedIds(ids); }, [ids]); console.log('here') return null }; ReactDOM.render( <SomeComponent/>, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
可能的解决方法是你应该设置{ ids }
而不是默认值(如果它是空的,保持原样)
const { useEffect, useState } = React const SomeComponent = ({ ids }) => { const [_, setSelectedIds] = useState([]); useEffect(() => { setSelectedIds(ids); }, [ids]); console.log('here') return null }; ReactDOM.render( <SomeComponent/>, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.