React：具有相同事件处理程序的多个组件：尝试仅更改被单击的组件的状态，而不是所有其他组件的状态

Question

我是 React 新手，必须处理一项特定任务，其中我的应用程序的所有逻辑都在一个父组件中，而子组件只接收一些道具。但是，在孩子身上不应该有任何逻辑或几乎没有逻辑。 我有一个由 25 个单元组成的网格（父组件），每个单元（子组件）可以打开或关闭。将每个单元想象成一盏开或关的灯。 从我的父组件中，我将单元组件渲染 25 次。每次每个单元格都有：

1. 一把钥匙
2. 身份证
3. 一种状态（随机分配的开启或关闭）
4. 点击事件

在我的子组件中，当点击事件被触发时，子组件返回给父组件它的 id 和它的状态（开或关）

我想要达到的目标：

在我的父组件中，我希望能够检测到哪个孩子被点击，并且只改变被点击孩子的状态。

到目前为止我得到了什么：

尽管父母收到了被点击的孩子的id和状态，当我通过setState改变状态时，所有的孩子都会受到影响。

这是我的父组件的 sn-p：

import React, { Component } from 'react';
import GridSquare from './GridSquare';
import { randomlyLit, cellIdentifier } from '../helpers/helperFuns.js';
let nums = []
cellIdentifier(nums, 25)

class GridContainer extends Component {
  static defaultProps = {
    gridSize: 25
    
  };
  constructor(props) {
    super();
    this.state = {
     cellID: nums,
      hasWon: false,
      lightStatus: Array.from({ length: 25 }, () => randomlyLit()),
    };
    this.changeValue = this.changeValue.bind(this);
  }

  
  changeValue(id, value) {
  console.log(id, value);
  this.setState(st => ({
    // let result = st.cellID.filter(c => c===id)
    // if(result){
    //   st.value = !value;
    // } 
    lightStatus : !value

  })
    
  )
   
  }

  render() {
  
    return (
      <div>
        <h1 className="neon">
          Light <span className="flux">Out</span>
        </h1>
        <div className="GridContainer">
        {this.state.cellID.map((el, i) =>(
          <GridSquare key={this.state.cellID[i]} id={this.state.cellID[i]} lit={this.state.lightStatus[i]} click={this.changeValue}/>
        ))}
        </div>
      </div>
    );
  }
}

export default GridContainer;

这是我的子组件的 sn-p：

import React, {Component} from 'react';

class GridSquare extends Component {
    
    constructor(props){
        super(props);
       
        this.handleClick= this.handleClick.bind(this)
    }

    handleClick(){
        this.props.click( this.props.id, this.props.lit);
    
    }

    render() {
        const squareClasses = {
            'GridSquareOn': this.props.lit === true,
            'GridSquareOff': this.props.lit === false,
            'GridSquare': true,
        }

        function classNames(squareClasses) {
            return Object.entries(squareClasses)
              .filter(([key, value]) => value)
              .map(([key, value]) => key)
              .join(' ');
          }

        const myClassName = classNames(squareClasses)
       
       
        return(
           <div className={myClassName}  onClick={this.handleClick}>
           </div>
        )
    }
}

export default GridSquare;

我的 app.js 只渲染父组件，没有别的：

import GridContainer from './components/GridContainer.jsx'

import './style/App.css';
import './style/GridContainer.css';
import './style/GridSquare.css';

function App() {
  return (
    <div className="App">
     
     <GridContainer />
    </div>
  );
}

export default App;

提前感谢您的帮助！

Answer 1

changeValue(id, value) {
  console.log(id, value);
  this.setState(st => ({
    // let result = st.cellID.filter(c => c===id)
    // if(result){
    //   st.value = !value;
    // } 
    lightStatus : !value

  })

您的更改值函数正在使用错误的值更新状态。 lightStatus 的初始值是一个布尔数组（假设 randomlyLit 函数将返回一个布尔值。

当您单击其中一个单元格时，lightStatus 会更新为 false 的值而不是数组。

要解决此问题，请按单击单元格的索引搜索整个 lightStatus 数组，并使用 Array.slice 更新该特定索引处的布尔值。

如何优化

而不是每次遍历整个数组来更新单元格的lightStatus。您可以将值保存在 Object 中。

如果我可以像这样更新changeValue 中的状态会怎样？

this.setState((st) => {
  return {
    ...st,
    lightStatus: { ...st.lightStatus, [id]: value } // Direct update without traversing through array
  }
});

lightStatus 可用于在cellID 中的单元格 id 与其对应的状态布尔值之间形成“映射”。