在React中如何从外部函数修改组件内部Hook的state状态？

方案1：状态提升（推荐，符合React设计规范） #

你当前代码有个可优化的基础问题：不要在一个组件内部定义另一个组件，每次HomeView重渲染都会重新创建ProductDetails实例，不仅会拉低性能，还可能导致内部状态意外重置。你提到的把state移到外层的思路完全可行，具体实现步骤如下：

• 把ProductDetails组件从HomeView内部移出，定义为独立组件
• 将原本ProductDetails内部的number、currentPrice两个state，以及初始拉取数据的useEffect逻辑移到HomeView中
• 把state、交互回调通过props传给ProductDetails组件，buyProduct函数在HomeView内部可以直接调用set方法更新state，更新后的数据会自动同步到子组件，不需要刷新页面

修改后的完整代码示例：

// 独立定义子组件，接收外层传入的props
const ProductDetails = ({ 
  number, 
  currentPrice, 
  onBuy 
}: { 
  number: number, 
  currentPrice: number, 
  onBuy: (price: number) => void 
}) => {
  return (
    <div>
      <h2>Current price : {currentPrice} </h2>
      <button onClick={() => onBuy(currentPrice)}>
        Click me
      </button>
      <h2>Available {number} / 10000</h2>
    </div>
  );
};

export const HomeView = () => {
  // 状态提升到外层HomeView管理
  const [number, setNumber] = React.useState(0);
  const [currentPrice, setCurrentPrice] = React.useState(5);

  // 初始数据拉取逻辑移到外层
  React.useEffect(() => {
    const fetchData = async () => {
      // 原有获取库存、价格的逻辑保留
      const initNumber = 15;
      setNumber(initNumber);
      const initPrice = 10;
      setCurrentPrice(initPrice);
    };
    fetchData();
  }, []);

  const buyProduct = async (price: number) => {
    // 原有购买逻辑保留
    const updatedNumber = 14;
    const updatedPrice = 11;
    
    // 直接调用外层set方法更新状态，自动同步到子组件
    setNumber(updatedNumber);
    setCurrentPrice(updatedPrice);
  };

  return (
    <div>
      {/* 通过props传递状态和回调给子组件 */}
      <ProductDetails 
        number={number} 
        currentPrice={currentPrice} 
        onBuy={buyProduct} 
      />
    </div>
  );
};

方案2：useImperativeHandle（仅做参考，不推荐新手使用） #

如果因为业务逻辑限制实在不想做状态提升，可以通过ref配合useImperativeHandle暴露子组件的状态更新方法，但这种写法会打破组件的封装性，后期维护成本更高，非特殊情况优先选择方案1即可。

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