如何在 lodash 的过滤方法中引用以前的状态？

Question

const [panelRight, setPanelRight] = useState(sample(filter(menu, (el) => el !== panelLeft)));
useEffect(() => {
const interval = setInterval(() => {
const menuCategory = filter(menu, (el) => el !== panelLeft && el !== panelRight);
setPanelRight(sample(menuCategory));
}, 10000);

当前的panelRight被设置为相同的随机菜单元素每次setInterval被调用。我认为这可能是因为我需要在过滤器方法中引用先前的状态，但是如何引用呢?

Answer 1

你的代码缺乏细节，我们不知道你的useEffectdeps中有什么，所以让我们假设和猜测。请下次提供更多细节。

让我们假设你的useEffect有一个空的[]依赖数组，并且只在第一次渲染时调用一次。

所以issue - setInterval将始终保持它在定义setInterval回调(闭包)时的初始值。第一次渲染的值

你应该这样做:

// Insert that before or after your setStates section
const panelRightRef = React.useRef();
const panelLeftRef = React.useRef();
// That will update ref variables
useEffect(() => {panelRightRef.current = panelRight}, [panelRight]);
useEffect(() => {panelLeftRef.current = panelLeft}, [panelLeft]);
useEffect(() => {
const interval = setInterval(() => {
// if menu is also a State variable and is not immutable - you should add useRef() for it
const menuCategory = filter(menu, (el) => el !== panelLeftRef.current && el !== panelRightRef.current);
setPanelRight(sample(menuCategory));
}, 10000);
// that will be called on depsarray changes or when component is destroyed
return () => clearInterval(interval);
}, []);