使用反应 state 一个键来呈现一个值

Question

我正在尝试制作一个简单的井字游戏来做出反应：

 28 import './App.css';
 27 import { useState } from "react"
 26 
 25 const X = 1;
 24 const O = -1;
 23 const EMPTY = 0;
 22 
 21 const SYMBOLS = {X: "X", O: "O", EMPTY: "E"};
 20 
 19 var Square = ({idx, click}) => 
 18 {
 17     let [val, setVal] = useState(EMPTY);
 16 
 15     return (
 14         <button onClick={() => {click(setVal, idx);}}>{SYMBOLS[val]}</button>
 13     )
 12 }
 11 
 10 var App = () =>
  9 {
  8     let [turn, setTurn] = useState(X);
  7     let [state, setState] = useState(new Array(9).fill(EMPTY));
  6     let squares = new Array(9);
  5 
  4     let click = (setValFunc, idx) => 
  3     {
  2         setTurn(-turn);
  1         setValFunc(turn);
29          setState((prev) => (prev.map((s, i) => i === idx ? turn : s ))) 
  1     }
  2 
  3     for (let i = 0 ; i < 9 ; i++)
  4     {   
  5         squares[i] = (<Square click={click} idx={i}/>);
  6     }
  7 
  8     return (
  9         <div>
 10             {squares}
 11         </div>
 12     )
 13 }
 14 
 15 export default App;

如您所见，我有三种状态：板的X 、 O 、 EMPTY ，分别由 1、-1 和 0 表示。

但是当我试图访问SYMBOLS object 到 map 数字到符号时（从Square返回值时），按钮只是空的。

这里有什么问题？

Answer 1

正如@Andy Ray 所提到的，问题来自您使用 SYMBOLS[0]、SYMBOLS[-1] 和 SYMBOLS[1] 而您的 SYMBOLS object 键是 X、O 和 EMPTY。 解决方案是重新定义 SYMBOLS：

const SYMBOLS = {
  [X]: 'X', // note the [X] notation that tells that the key should be the value of the variable X that's to say 1. 
  [O]: 'O',
  [EMPTY]: 'E'
}