React Native子组件点击后父组件状态不更新怎么办？

公孙爱巧提问于 2026-01-31 16:48:27 阅读 87

框架

大家好，我在用React Native开发父子组件时遇到问题。父组件通过props传递了一个更新状态的函数给子组件，但点击子组件按钮后状态没有变化：


// 父组件
const Parent = () => {
  const [count, setCount] = useState(0);
  return (
     setCount(prev => prev + 1)} 
    />
  );
};

// 子组件
const Child = ({ count, onIncrement }) => (
  
    当前计数：{count}
  
);

我尝试过在父组件里用箭头函数包裹setCount，也试过用useCallback，但点击后count始终显示初始值0。控制台也没有报错，这是什么原因呢？

Redux 性能优化

我来解答赞 16 收藏

反馈

2 条解答

ლ子骞 Lv1

这个问题的根本原因在于子组件没有正确处理点击事件。你的代码看起来逻辑是对的，但其实漏了一个关键细节：子组件里的TouchableOpacity没有绑定onPress事件处理函数。

我们来分解问题：
1. 你传了onIncrement给子组件，但子组件里的按钮根本没调用它
2. 点击事件根本没触发父组件的状态更新函数

改起来很简单，把子组件改成这样：

const Child = ({ count, onIncrement }) => (

  <TouchableOpacity 

    onPress={onIncrement} // 关键在这里，要把props里的回调绑定到onPress

    style={styles.button}

  >

    <Text>当前计数：{count}</Text>

  </TouchableOpacity>

);

为什么这样能解决问题：
- React Native的TouchableOpacity需要明确指定onPress才会响应点击
- 你之前只是把回调函数传给了子组件，但没告诉它什么时候触发
- 现在每次点击都会调用父组件传下来的onIncrement

我遇到过很多次这种情况，特别是深夜写代码的时候容易犯这种低级错误。有时候问题就出在最简单的地方，但就是死活看不出来。

另外建议可以加个console.log调试：

const Parent = () => {

  const [count, setCount] = useState(0);

  const handleIncrement = () => {

    console.log('回调被调用了'); // 调试用

    setCount(prev => prev + 1);

  };

  return <Child count={count} onIncrement={handleIncrement} />;

};

这样如果点击后看到log输出但状态没更新，那才是真的遇到state更新问题。不过你的情况应该就是漏绑onPress了。

2026-03-09 17:25

公孙文瑞 Lv1

你这个问题是子组件没正确接收props里的状态值，React渲染时用了旧的count。改一下子组件，用函数式写法确保拿的是最新状态：

const Child = ({ onIncrement }) => (

  <Button title="+" onPress={() => onIncrement()} />

);

父组件保持不变，这样就能正常更新了。折腾了吧？😄

2026-02-01 11:03