React类组件中添加对象到数组的状态更新异常问题

核心问题分析 #

• setState异步特性导致状态不即时更新：React的setState是异步操作，调用后this.state不会立刻更新，所以你在setState后直接打印状态或传递给父组件的都是旧值。
• 嵌套数组结构错误：filter返回的是数组，你又额外包裹了一层数组，导致productsToBuy变成[[产品1], [产品2]]的嵌套结构，后续渲染或操作时会出现异常。
• 直接修改状态触发报错：使用push会直接修改this.state.productsToBuy，违反React状态不可变原则，第一次操作可能侥幸生效，但后续React会将状态优化为不可变对象，触发push is not a function错误。

代码修复步骤 #

1. 正确获取单个产品 #

直接通过索引取目标产品，替代冗余的filter操作：

const newProduct = this.props.productsToDisplay[index];

如果必须用filter，需取返回数组的第一个元素：this.props.productsToDisplay.filter(...)[0]，但索引访问更高效简洁。

2. 用函数式更新+回调获取最新状态 #

依赖旧状态更新时，使用函数式setState确保拿到最新状态；通过setState的回调函数处理更新后的逻辑：

this.setState(prevState => ({
  productsToBuy: [...prevState.productsToBuy, newProduct]
}), () => {
  this.props.sendAddedProductsToParent(this.state.productsToBuy);
  console.log(this.state.productsToBuy);
});

这里用扩展运算符[...prevState.productsToBuy, newProduct]替代concat，同样返回新数组，符合状态不可变原则。

完整修复后的代码 #

import React from "react";
import commonColumnsStyles from "../../common/styles/Columns.module.scss";

class ProductsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { productsToBuy: [] };
    this.addProduct = this.addProduct.bind(this);
  }

  addProduct(index) {
    const newProduct = this.props.productsToDisplay[index];
    this.setState(prevState => ({
      productsToBuy: [...prevState.productsToBuy, newProduct]
    }), () => {
      this.props.sendAddedProductsToParent(this.state.productsToBuy);
      console.log(this.state.productsToBuy);
    });
  }

  render() {
    return (
      <div className={commonColumnsStyles.App}>
        <header className={commonColumnsStyles.AppHeader}>
          <p>Products list</p>
          <ul>
            {this.props.productsToDisplay.map((currProduct, index) => (
              <li key={index} onClick={() => this.addProduct(index)}>
                {currProduct.nazwa}
              </li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

export default ProductsList;

额外建议 #

• 避免用索引作为key：如果productsToDisplay的顺序可能变化，索引key会导致渲染异常，建议使用产品的唯一ID（如currProduct.id）作为key。
• 严格遵循状态不可变原则：永远不要直接修改this.state中的数组或对象，必须通过返回新的数组/对象来更新状态，也可以使用Immer库简化不可变操作。

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