React组件状态同步异常：购物列表删后加商品问题咨询

你的问题核心是状态管理混乱+异步状态更新的错误使用，具体问题点及修复步骤如下：

问题分析 #

1. 初始状态类型错误：App组件的resultToDisplay和resultRemoved初始值设为空字符串''，但后续操作都是数组逻辑，字符串与数组混用导致状态异常。
2. 异步状态更新误用：ShoppingList删除商品时，传递给父组件的是删除前的旧数组——因为setProductList是异步操作，你直接调用的productList还是更新前的旧值。
3. 类组件props未同步：ProductsList类组件的productsToBuy状态只在初始化时从props取一次，后续resultRemoved props更新时，state不会自动同步。

具体修复步骤 #

1. 修正App组件的初始状态 #

将两个状态的初始值改为空数组，匹配后续数组操作的需求：

function App() {
  // 把初始值从''改为[]
  const [resultToDisplay, setResultToDisplay] = useState([]);
  const [resultRemoved, setResultRemoved] = useState([]);

  return (
    <div className={styles.appWrapper}>
      <AddProducts />
      <ProductsFilters />
      <div className={styles.columnsWrapper}>
        <ProductsList
          productsToDisplay={produkty}
          sendAddedProductsToParent={setResultToDisplay}
          resultRemoved={resultRemoved}
        />
        <ShopingList
          resultToDisplay={resultToDisplay}
          sendRemovedProductsToParent={setResultRemoved}
        />
      </div>
    </div>
  );
}

2. 修复ShoppingList的删除逻辑 #

删除时传递过滤后的新数组，而非旧数组；同时可以去掉冗余的productList状态，直接使用父组件传递的props（推荐方案）：

function ShopingList(props) {
  function removeClick(e, index) {
    e.preventDefault();
    // 先计算删除后的新数组
    const newProductList = props.resultToDisplay.filter((currProduct, i) => i !== index);
    // 直接更新父组件状态
    props.sendRemovedProductsToParent(newProductList);
  }

  return (
    <div className={commonColumnsStyles.App}>
      <header className={commonColumnsStyles.AppHeader}>
        <p>Shoping List</p>
        <ul>
          {props.resultToDisplay.length
            ? props.resultToDisplay.map((currProduct, index) => (
                <li onContextMenu={(e) => removeClick(e, index)} key={index}>
                  {currProduct.nazwa}
                </li>
              ))
            : null}
        </ul>
      </header>
    </div>
  );
}

如果要保留productList状态用于练习，需确保传递新数组：

function ShopingList(props) {
  const [productList, setProductList] = useState(props.resultToDisplay);

  useEffect(() => {
    setProductList(props.resultToDisplay);
  }, [props.resultToDisplay]);

  function removeClick(e, index) {
    e.preventDefault();
    const newProductList = productList.filter((currProduct, i) => i !== index);
    setProductList(newProductList);
    // 传递新数组而非旧的productList
    props.sendRemovedProductsToParent(newProductList);
  }

  // 其余代码不变
}

3. 修复ProductsList类组件的props同步 #

类组件需通过componentDidUpdate监听props变化，同步更新state：

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

    this.addProduct = this.addProduct.bind(this);
  }

  // 添加props更新监听，同步state
  componentDidUpdate(prevProps) {
    if (prevProps.resultRemoved !== this.props.resultRemoved) {
      this.setState({ productsToBuy: this.props.resultRemoved });
    }
  }

  addProduct(index) {
    // 基于当前状态复制数组并添加新商品
    const toBuy = [...(this.state.productsToBuy || []), this.props.productsToDisplay[index]];
    this.setState({ productsToBuy: toBuy });
    this.props.sendAddedProductsToParent(toBuy);
  }

  // 其余代码不变
}

优化建议（可选） #

建议将购物车状态完全交由App组件统一管理，ProductsList无需维护自身的productsToBuy状态，直接基于父组件传递的状态进行操作，从根源避免多组件状态不一致问题：

// 修改ProductsList的addProduct方法
addProduct(index) {
  const toBuy = [...(this.props.resultRemoved || []), this.props.productsToDisplay[index]];
  this.props.sendAddedProductsToParent(toBuy);
}

此时可删除ProductsList中的productsToBuy状态，进一步简化组件。

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