React js 错误：无法读取未定义的属性'0'

Question

这一行给了我一个错误{gridValues[props.gridIndex]}。我试图实现的目标是，我的gridValues数组应该显示在我的屏幕上为一个特定的索引。点击后，值应该根据情况改变为"X"或"O"。基本上这是两个玩家之间的游戏X和O渲染。

import React, { useState } from "react";
import "./Box.css";
function Box(props) {
const [gridValues, setGridValue] = useState([
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" ",
" "
]);
const [symbol, setSymbol] = useState("X");
function handleClick(index) {
console.log('here')
if (gridValues[index] === " ") {
setGridValue((prevValues) => {
for (var i = 0; i < prevValues.length; i++) {
if (i === index) {
prevValues[i] = symbol;
}
}
});
if (symbol === "X") {
setSymbol("O");
} else {
setSymbol("X");
}
}
}
return (
<div
key={props.gridIndex}
onClick={() => handleClick(props.gridIndex)}
className="box"
>
{gridValues[props.gridIndex]}
</div>
);
}
export default Box;

Answer 1

你的updatater函数必须有一个返回值。如果你不返回一个数组，gridValues将被设置为undefined。

setGridValue((prevValues) => {
const newValues = prevValues.slice()
newValues[index] = symbol
return newValues
})

Answer 2

你的函数setGridvalue必须返回一个新的数组，你不能直接更改为prevValues

setGridValue((prevValues) => {
for (var i = 0; i < prevValues.length; i++) {
if (i === index) {
prevValues[i] = symbol;
}
}
});

setGridValue((prevValues) => {
let newArr = [...prevValues]
newArr[index] = symbol;
return newArr;
})