reactjs - 为什么在 JSX 中再次渲染 React 变量？

Question

function App() {
    const puzzles = [...Array(12)].map((_, i) => i).sort(() => Math.random() - 0.5);
    console.log(puzzles)
    return (
         <Game puzzles={puzzles} />
    );
}

const Game = (props) => {
    return <div>{props.puzzles}</div>;
};

我在 App.js 中设置了一个从 0 到 2 的 const rand 数组 [puzzles]

然后我将 [puzzles] 变量传递给游戏组件，

我 console.log 在 App.js 和 Game Component 的 [puzzles]，

结果不知何故不同......

[1,2,0] log in App.js

[0,2,1] log in Component

看起来数组在 JSX 内部的某个地方再次运行，

如果我错过了什么，有人可以告诉我吗？非常感谢！！！

标签： reactjsvariablesjsxrender