React新手求助：向displayData2数组push后修改div的className

嘿，作为React新手，你遇到的问题其实是很多刚上手的开发者都会踩的坑——静态生成的React元素无法响应状态变化，再加上一些不符合React状态管理规范的操作，导致className没法按预期切换。我来帮你拆解问题并修复代码：

你的代码里有两个关键问题导致className不更新：

1. 直接创建静态React元素：在UpdateData中往displayData2里push的div，它的className是基于当时的changeClass状态生成的固定值，后续changeClass变化时，这个元素不会自动重新计算className。
2. 不规范的状态/数据修改：直接修改类实例变量（比如this.displayData2.push(...)）和state对象（this.state.store.push(...)），React无法检测到这些变化，组件可能不会触发重新渲染，视图也就没法更新。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    // 把所有动态数据都放进state管理，不用类实例变量
    this.state = {
      displayData1: [0],
      displayData2: [1],
      allData: [2, 3, 4, 5, 6],
      store: [],
      changeClass: false,
      ani: false
    };
    this.updateData = this.updateData.bind(this);
    this.setNew = this.setNew.bind(this);
  }

  updateData() {
    // 不要直接修改原数组，用扩展运算符创建副本
    const nextItem = this.state.allData[0];
    const newDisplayData2 = [...this.state.displayData2, nextItem];
    
    this.setState({
      displayData2: newDisplayData2,
      allData: this.state.allData.slice(1), // 移除第一个元素的副本
      changeClass: true
    });
    setTimeout(this.setNew, 1000);
  }

  setNew() {
    // 所有数组操作都用副本，避免直接修改原数据
    const [shiftedItem] = this.state.displayData1;
    const newDisplayData1 = [...this.state.displayData1.slice(1), this.state.displayData2[0]];
    const newDisplayData2 = this.state.displayData2.slice(1);
    const newStore = [...this.state.store, shiftedItem];

    this.setState({
      displayData1: newDisplayData1,
      displayData2: newDisplayData2,
      store: newStore,
      changeClass: false,
      ani: true
    });
  }

  render() {
    const { displayData1, displayData2, changeClass, ani } = this.state;

    return (
      <div className="App wrapper">
        <div className={`left box hidden${changeClass ? '' : ' active'}`}>
          <div className="ani">{displayData1}</div>
        </div>
        <div className={`right box visible${changeClass ? '' : ' active'}${ani ? ' a' : ' b'}`}>
          {/* 在这里动态生成div，className会实时响应changeClass的变化 */}
          <div>
            {displayData2.map((item, index) => (
              <div 
                className={changeClass ? 'ani' : 'newani'} 
                key={item} // 用item当key更稳妥，前提是item唯一
              >
                {item}
              </div>
            ))}
          </div>
        </div>
        <button onClick={this.updateData}>getData</button>
      </div>
    );
  }
}

export default App;

1. 统一用state管理动态数据：把displayData1、displayData2全部移到state中，确保数据变化能触发组件重新渲染。
2. 数组操作都用副本：每次更新数组时用扩展运算符（[...]）或slice()创建新数组，让React能检测到数据变化。
3. 动态生成React元素：不在updateData里提前创建div，而是在render时用map遍历数据生成元素，这样每个div的className会实时跟着changeClass状态变化。
4. 规范state更新：再也不直接修改this.state对象，所有状态更新都通过setState完成。

这样修改后，点击按钮后changeClass变为true，displayData2里的元素会自动切换为ani类；1秒后setNew执行，changeClass变回false，className也会切回newani，完全符合你的预期。

内容的提问来源于stack exchange，提问作者Ravi Kumar