如何在多个组件中修改同一状态并实现跨组件状态值同步？

首先纠正你代码里的一个错误：React状态声明需要使用useState钩子，正确写法是：

const [num, setNum] = useState(0);

记得要从react中导入useState。

下面是两种可行的实现方式：

方案一：直接传递setNum给跨文件函数 #

这是最直接的做法，把组件的状态更新函数setNum作为参数传给另一个文件的addNum函数，在addNum内部调用它来更新状态。

组件文件（示例：Counter.js） #

import { useState } from 'react';
import { addNum } from './your-other-file.js';

function Counter() {
  const [num, setNum] = useState(0);

  return (
    <div>
      {/* 点击加号时把setNum传给addNum */}
      <button onClick={() => addNum(setNum)}>+</button>
      <button onClick={() => setNum(prev => prev - 1)}>-</button>
    </div>
  );
}

export default Counter;

外部函数文件（示例：your-other-file.js） #

export function addNum(setNum) {
  // 使用函数式更新获取最新状态，避免闭包导致的旧值问题
  setNum(prevNum => prevNum + 1);
  
  // 这里可以添加其他业务逻辑，比如日志、接口请求等
  // console.log('数值已加1');
}

方案二：封装带状态更新的逻辑（可选） #

如果addNum需要结合更多业务逻辑，也可以基于传入的更新函数做判断处理，依然推荐用函数式更新确保状态准确性：

// your-other-file.js
export function addNum(setNum) {
  // 模拟业务逻辑校验
  const canAdd = true;
  if (canAdd) {
    setNum(prev => prev + 1);
  }
}

关键注意点 #

一定要用函数式更新（setNum(prev => prev + 1)）而不是直接写setNum(num + 1)，因为跨文件函数可能会因为闭包捕获到旧的num值，导致状态更新不准确。函数式更新会自动传入最新的状态快照，保证结果正确。

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