使用 Hooks 更新 React Js 中的 JSX 内容答案

【问题标题】：Update JSX content in React Js with Hooks使用 Hooks 更新 React Js 中的 JSX 内容
【发布时间】：2020-08-18 01:38:12
【问题描述】：

我正在使用 React Js 制作记忆游戏，但洗牌时无法更新游戏板。这是项目：

我创建了一个带有如下卡片名称的数组：

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

我创建了一个函数来使用 useState 更新和打乱这个数组：

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

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

在我的按钮中调用 ResetBoard()：

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

在我的 JSX 代码中渲染板：

<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>

但是当我点击重置按钮时，我的板状态改变（在控制台中）但前端没有改变。

【问题讨论】：

我认为你不应该在 html 中声明你的 useEffect。如果你在这里检查：reactjs.org/docs/hooks-effect.html useEffect 在 return 语句之前声明。
哦，谢谢，有道理，我也这么认为，但是当我只写 {board.map(...)} 时也不起作用。我开始学习 ReactJs，你知道我如何解决或搜索这个问题吗？
我有点惊讶 Jagratis 的答案不起作用 - 你能分享整个组件的代码吗？那我也许能发现问题所在:)

标签： javascript reactjs react-hooks

【解决方案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 之后不会返回更新状态，因为状态更新本质上是异步的。

【讨论】：

哦，是的，我也试过了，但没有任何变化，这是一个打印屏幕来说明我的情况：Img Link。但是感谢您的回答和帮助。
重置板子状态时，需要使用CardData。更新了答案。
早上好，我解决了使用 react-router-dom 中的 useHistory 刷新组件的问题，我创建了一个重新加载组件的函数。感谢您的帮助。

【解决方案2】：

这是我的解决方案：

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

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

它可以工作一段时间。

感谢所有帮助过我的人。

【讨论】：