Javascript 使用钩子更新React Js中的JSX内容

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

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

我创建了一个函数来使用useState更新和洗牌此数组：

在我的按钮中调用ResetBoard（）：

在我的JSX代码中呈现板：

{board.map（（卡片）=>(
))}

---

但是，当我单击重置按钮时，我的电路板状态会更改（在控制台中），但前端不会更改。

您不需要在渲染中使用效果

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>

const[board，setBoard]=useState（CardData.sort（（）=>Math.random（）-0.5））；
功能板（）{
setBoard（CardData.sort（（）=>Math.random（）-0.5））；//使用CardData.sort重置电路板状态
}
.......
{board.map（卡=>(
))}

console.log（board）

紧接着

setBoard

不会返回更新状态，因为状态更新本质上是异步的。

这是我的解决方案：

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

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

暂时有效

---

感谢所有帮助我的人。

我认为你不应该在html中声明你的useEffect。如果您在这里选中：useffect是在return语句之前声明的。哦，谢谢，这很有意义，我也这么认为，但是当我只写{board.map（…）}时，它也不起作用。我开始学习ReactJs，你知道我如何修复或搜索这个问题吗？我有点惊讶Jagratis的答案不起作用-你能分享整个组件的代码吗？我也许能找出哪里出了问题：）哦，是的，我也试过了，但没什么变化，这是一个用于说明我的情况的打印屏幕：。感谢您的回答和帮助。在重置电路板状态时，您需要使用

CardData

。更新了答案。早上好，我使用react router dom中的useHistory解决了刷新组件的问题，我创建了一个用于重新加载组件的函数。谢谢你的帮助。

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

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

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>

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

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