React中如何在独立函数组件间共享state的count值？

你当前的错误原因很明确：组件内部通过useState声明的state是局部私有状态，只能在当前组件内部访问。你直接在ProductListItem里调用OrderCheckoutScreen({count})，本质是创建了一个全新的OrderCheckoutScreen实例，而且如果这两个组件并非嵌套渲染的父子关系，这种传参方式根本无法让原本的OrderCheckoutScreen拿到count值，自然会返回undefined。

结合你的代码里已经使用Redux的情况，给你两种针对性的解决方案：

方案一：利用Redux共享状态（推荐，适合非父子组件场景） #

既然你已经在用Redux管理selected_products这类全局状态，直接把count相关逻辑移到Redux的store里即可：

1. 在你的products slice中添加count相关的action和reducer：

// 示例reducer代码
const productsSlice = createSlice({
  name: 'products',
  initialState: {
    orderCheckout: {
      selected_products: [],
      loading: false,
      success: false,
      message: '',
    },
    itemCount: 0, // 新增全局count状态
  },
  reducers: {
    incrementCount: (state) => {
      state.itemCount += 1;
    },
    decrementCount: (state) => {
      // 确保count不小于0，替代原countNumHandler的逻辑
      state.itemCount = Math.max(0, state.itemCount - 1);
    },
    resetCount: (state) => {
      state.itemCount = 0;
    },
  },
  // 保留你原有的其他reducer逻辑
});

export const { incrementCount, decrementCount, resetCount } = productsSlice.actions;
export default productsSlice.reducer;

2. 修改ProductListItem组件，用Redux action更新count：

const ProductListItem = ({
  item: {id, title, description, price, currency, images, category}, 
  imageSize,
  margins,
  onPress,
}) => {
  const dispatch = useDispatch();
  // 从Redux获取全局count
  const count = useSelector(state => state.products.itemCount);

  const countAddHandler = () => {
    dispatch(incrementCount());
  };
  const countSubtractHandler = () => {
    dispatch(decrementCount());
  };

  // 原countNumHandler逻辑已在reducer中处理，可删除

  return (
    // 你的组件渲染内容，比如调用countAddHandler的按钮
    <button onClick={countAddHandler}>+</button>
    <span>{count}</span>
    <button onClick={countSubtractHandler}>-</button>
    {/* 其他UI内容 */}
  );
};

3. 在OrderCheckoutScreen中直接从Redux获取count：

export default function OrderCheckoutScreen({}) {
  const navigation = useNavigation();
  const dispatch = useDispatch();

  const {selected_products, loading, success, message} = useSelector(
    state => state.products.orderCheckout,
  );
  // 直接获取全局count状态
  const count = useSelector(state => state.products.itemCount);

  // 后续即可在组件中使用count值
  return (
    // 你的组件渲染内容
    <div>当前选中数量：{count}</div>
  );
}

方案二：状态提升（仅适用于父子组件场景） #

如果ProductListItem是作为子组件在OrderCheckoutScreen内部渲染的（比如作为列表项），可以把count状态提升到父组件OrderCheckoutScreen，再通过props传给子组件：

1. 修改OrderCheckoutScreen，托管count状态：

export default function OrderCheckoutScreen({}) {
  const navigation = useNavigation();
  const dispatch = useDispatch();
  // 把count状态放在父组件
  const [count, setCount] = useState(0);

  const {selected_products, loading, success, message} = useSelector(
    state => state.products.orderCheckout,
  );

  // 定义更新count的方法，或者直接把setCount传给子组件
  const incrementCount = () => setCount(prev => prev + 1);
  const decrementCount = () => setCount(prev => Math.max(0, prev - 1));

  return (
    // 渲染ProductListItem时传入count和更新方法
    <ProductListItem 
      item={/* 你的item数据 */}
      imageSize={/* 尺寸值 */}
      margins={/* 边距值 */}
      onPress={/* 点击事件 */}
      count={count}
      incrementCount={incrementCount}
      decrementCount={decrementCount}
    />
  );
}

2. 修改ProductListItem，接收父组件传参：

const ProductListItem = ({
  item: {id, title, description, price, currency, images, category}, 
  imageSize,
  margins,
  onPress,
  count,
  incrementCount,
  decrementCount,
}) => {
  // 无需再声明自己的useState，直接使用父组件传入的count和方法
  return (
    <button onClick={incrementCount}>+</button>
    <span>{count}</span>
    <button onClick={decrementCount}>-</button>
    {/* 其他UI内容 */}
  );
};

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