React点击单个按钮改色及key prop唯一警告问题咨询

触发警告的原因是你遗漏了外层循环元素的key配置：

• 你仅给内层循环的<Square>元素配置了key，但外层循环生成的每个<div className="board-row">是插入到board数组中做列表渲染的直接子元素，没有配置唯一key，这是警告的触发源。
• 额外冗余点：key仅需要配置在列表渲染的直接子节点上，你在Square组件内部给button加的key是无效多余的，可以直接删除。

解决方法：给外层的行div添加唯一key即可，修改对应代码：

// Board.js render方法中修改行插入逻辑
board.push(<div className="board-row" key={i}>{squareRows}</div>)

现有逻辑的问题是你使用了Board组件的全局状态控制所有格子颜色，状态更新会同步作用到所有格子，要实现单个格子变色需要单独记录每个格子的选中状态，修改步骤如下：

1. 调整Board组件的状态定义 #

新增selectedSquares存储被点击的格子唯一标识

constructor(props){
  super(props);
  this.state ={
    selectedSquares: new Set(), // 存储被选中的格子id
    defaultGray: "gray", // 初始灰色
    selectedBlack: "black" // 选中后黑色
  }    
}  

2. 修改点击事件逻辑 #

接收格子id作为参数，更新选中集合

handleClick = (squareId) => {
  this.setState(prevState => {
    const newSelected = new Set(prevState.selectedSquares);
    if (newSelected.has(squareId)) {
      newSelected.delete(squareId); // 重复点击取消选中
    } else {
      newSelected.add(squareId);
    }
    return { selectedSquares: newSelected }
  })
}

3. 调整渲染逻辑，动态计算格子颜色 #

渲染时判断当前格子id是否在选中集合中，对应分配颜色，同时将id绑定到点击事件

render() {
  const board = [];
  const { selectedSquares, defaultGray, selectedBlack } = this.state;
  for(let i = 0; i < 8; i++){
    const squareRows = [];
    for(let j = 0; j < 8; j++){
      const squareId = (i*8 + j).toString();
      // 判断当前格子是否被选中，分配对应颜色
      const squareShade = selectedSquares.has(squareId) ? selectedBlack : defaultGray;
      squareRows.push(<Square 
        shade = {squareShade}
        onClick={() => this.handleClick(squareId)}
        key={squareId}
        value={squareId}
      />);
    }
    board.push(<div className="board-row" key={i}>{squareRows}</div>)
  }

  return (
    <div>
        {board}
    </div>
  );
}

4. 清理Square组件的冗余key #

// Square.js 删除button上的key属性
import React from 'react';

export default function Square(props) {
  const square = {
      width: "100px",
      height: "100px",
      color:"yellow",
      backgroundColor: props.shade
  };
  return (
    <button className={"square " + props.shade}
    onClick={props.onClick}
    style={square}>{props.value}
    </button>
  );
}

内容的提问来源于stack exchange，提问作者Alvin wijaya