React中子组件调用父组件函数时props.products返回空数组问题

一、直接修改状态变量的错误操作 #

你在初始化状态后直接给products变量赋值的写法违反了React的状态不可变原则：

const [products, setProducts] = useState([])
// ❌ 错误：直接修改状态变量，不会触发组件更新，还会导致状态混乱
products= {
    'product_id':'1',
    'total':'100'
}
setProducts(products)

这种写法会绕过React的状态管理机制，虽然最后调用了setProducts，但之前的直接修改可能导致状态快照和实际值不一致，埋下渲染异常的隐患。而且你初始状态是数组[]，后续改成了对象类型，类型不统一也会增加调试难度。

二、闭包捕获旧状态导致的弹窗回调异常 #

弹窗InventoryModal在SalesViewProducts组件渲染时被创建，它内部的Add按钮回调会捕获当时的props.products值。如果父组件后续更新了products状态，但弹窗没有重新渲染，回调函数里拿到的还是弹窗打开时的旧状态（也就是初始的空数组[]）。这是React中闭包常见的陷阱。

修复方案 #

1. 修正状态更新方式

不要直接修改状态变量，直接通过setProducts传入新状态，同时统一状态类型（如果是多个产品，建议用数组包裹对象）：

const [products, setProducts] = useState([]);

// ✅ 正确：直接传递新状态给setProducts
setProducts([{
  product_id: '1',
  total: '100'
}]);

2. 解决闭包捕获旧状态的问题

可以任选以下一种方式：

• 给弹窗添加唯一key强制重渲染：当products变化时，让弹窗重新渲染，确保回调捕获最新的props：

  // 在SalesViewProducts组件内渲染弹窗时
  <InventoryModal
    key={JSON.stringify(props.products)} // 用状态的字符串作为key
    isOpen={modalVisible}
    onAdd={addProducts}
  />
  

• 用useRef保存最新状态：在SalesViewProducts组件内用ref实时同步最新的props值，避免闭包捕获旧值：

  import { useRef, useEffect } from 'react';
  
  const SalesViewProducts = (props) => {
    const productsRef = useRef(props.products);
    
    // 当props.products变化时更新ref
    useEffect(() => {
      productsRef.current = props.products;
    }, [props.products]);
  
    const addProducts = () => {
      console.log(productsRef.current); // 这里拿到的是最新状态
    };
  
    // 其他代码...
  };
  

• 将状态作为参数传递给回调：打开弹窗时把当前的products传递给弹窗，点击Add时再把该值作为参数传入addProducts：

  // SalesViewProducts内打开弹窗的逻辑
  const openModal = () => {
    setModalVisible(true);
  };
  
  // 渲染弹窗时传递当前products
  <InventoryModal
    isOpen={modalVisible}
    onAdd={() => addProducts(props.products)}
  />
  
  // addProducts接收当前状态作为参数
  const addProducts = (currentProducts) => {
    console.log(currentProducts);
  };
  

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