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

Question

this line is giving me an error {gridValues[props.gridIndex]} . The goal I'm trying to achieve is that my gridValues array should be displayed on my screen for a specific index. After onClick the value should change to either 'X' or 'O' depending on the situation. Basically this is tic tac toe X and O render between two players.

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

Your updater function must have a return value. If you don't return an array, gridValues will be set to undefined .

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

Answer 2

your function setGridvalue have to return a new array, you cant change direct to prevValues

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

to

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