我正在学习 React Hooks,但在使用 useEffect 重新渲染组件以及如何将 onClick 函数传递给同样包含在 useEffect 中的子组件时遇到了一些困难。
我正在从包含数字 1 到 12 的状态数组的映射中创建子组件。这些子组件有一个 onClick 函数,可以随机化数组。 目的是一旦点击一个数字,订单就会重新洗牌并显示新订单。
下面的代码有效,但只有在我包含数字和 setNumber 以强制渲染之后。没有这些,即使数组确实洗牌,也不会重新渲染。
为什么包含 setNumber(number + 1)
会强制渲染,但没有它,什么都不会发生?
此外,我不确定如何将 randomiseArray
函数置于 useEffect 中,但仍然能够将其传递给子组件。
const [array, setArray] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])
const [number, setNumber] = useState(1)
useEffect(() => {
})
const randomiseArray = () => {
let list = array
list = list.sort(() => Math.random() - 0.5)
setArray(list)
console.log(array) // Shows array is shuffling
setNumber(number + 1) // Only after I include this does the component re-render
}
const content = array.map((index, key) => {
return <Card onClick={randomiseArray} key={key} number={index}/>
})
return (
<div className="board">
{content}
</div>
);
在此先感谢您的帮助。
答案 0 :(得分:0)
复制 array
并执行 sort
试试这个代码
const randomiseArray = () => {
setArray([...array.sort(() => Math.random() - 0.5)]);
};
或
const randomiseArray = () => {
const list = [...array.sort(() => Math.random() - 0.5)];
setArray(list);
};