如何解决如何将状态传递给React中的组件,而每个传递的状态都不相同
我试图通过点击计数器将状态传递给几个组件。因此,我可以单击增加计数状态值的计数器,如果我停在说10并将其发送到组件,则我想下次使用计数器并将这次设置为15时,我需要它将其发送到另一个组件(或相同组件),但是现在计数状态为15。我不想将状态的两个实例都设置为15。每个状态都应保留其编号。
JSX
<div className="addnum" onClick={() => addUnits()}>+</div>
JS
const [units,setUnits] = useState(0)
function addUnits() {
setUnits(prev => prev+1)
}
某些组件1
<div>{units}</div>
某些组件2
<div>{units}</div>
我的问题是,当我设置一个状态时,另一个处于相同状态,这很正常。我该如何删除参考或创建每个州的副本,以便它们独立存在?
我看到这篇文章回答了使用基于类的组件时的问题,但是我的状态不是数组,所以我该怎么做? https://stackdev.io/question/434/copy-the-state-in-react-without-reference
解决方法
据我了解。您有计数器列表和所谓的“某些组件”列表。 因此,在这种情况下,简单的数据结构是数组。 另外,在停机后需要计时器来创建新的插槽。 useReducer是处理非标量状态的首选方法。 类似于以下内容:
const initialState = [0];
function reducer(state,action) {
const [head,...tail] = state;
switch (action.type) {
case 'inc':
return [head + 1,...tail];
case 'new':
return [0,...state];
default:
throw new Error();
}
}
function Counter() {
const [state,dispatch] = useReducer(reducer,initialState);
const timer = useRef(null);
const inc = useCallback(() => {
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => dispatch({type: 'new'}),1000);
dispatch({type: 'inc'});
},[timer,dispatch]);
useEffect(() => () => {
if (timer.current) clearTimeout(timer.current);
});
return (
<>
{state.map((count,i) => <div key={i}>{count}</div>)}
<button onClick={inc}>+</button>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。