Question

我正在学习 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>
  );

在此先感谢您的帮助。

Answer 1

复制 array 并执行 sort

试试这个代码

 const randomiseArray = () => {
    setArray([...array.sort(() => Math.random() - 0.5)]);
  };

或

 const randomiseArray = () => {
    const list = [...array.sort(() => Math.random() - 0.5)];
    setArray(list);
  };

代码示例：https://stackblitz.com/edit/react-ko1vri

useEffect 在预期时不会重新渲染

1 个答案: