在React Js中使用Hooks更新JSX内容。

Question

我在用React Js做一个记忆游戏，但是我洗牌的时候不能更新游戏板。这就是这个项目。

1. 我创建了一个数组，里面的牌名是这样的。

export default ["Earth","Jupiter","Mars","Mercury","Moon"...

2. 我创建了一个函数来更新和洗牌这个数组 使用useState:

const [board, setBoard] = useState(CardData.sort(() => Math.random() - 0.5));

function ResetBoard() {
    setBoard(board.sort(() => Math.random() - 0.5));
    console.log(board);
}

3. 在我的按钮中调用ResetBoard()。

<button className="retry-btn" onClick={ResetBoard}>

4. Render board in my JSX code:

<div className="card-section">
    {board.map((Card) => (
       <div className="card" key={Card}>
           <img
            src={require(`../assets/cards/${Card}.png`)}
            alt="Cards"
            width="100px"
            height="100px"/>
       </div>
     ))}
</div>

但当我点击Reset Button时，我的板子状态发生了变化（在控制台），但前端没有变化。

Answer 1

你不需要 useEffect 在渲染中。

const [board, setBoard] = useState(CardData.sort(() => Math.random() - 0.5));

function ResetBoard() {
    setBoard(CardData.sort(() => Math.random() - 0.5)); // use CardData.sort to reset the board state
}

.......

<div className="card-section">
    {board.map(Card => (
        <div className="card" key={Card}>
           <img
            src={require(`../assets/cards/${Card}.png`)}
            alt="Cards"
            width="100px"
            height="100px"/>
        </div>
     ))}
</div>

console.log(board) 紧接着 setBoard 不会返回更新的状态，因为状态更新是异步的。

Answer 2

这是我的解决方案。

const [board] = useState(CardData.sort(() => Math.random() - 0.5));

function shuffleBoard(event) {
    event.preventDefault();
    history.push("/game");
  }

它的工作原理是：

谢谢大家对我的帮助。