React Native新手求助：跨组件绑定useState实现按钮联动计数

核心问题出在你把计数状态放在了Bottom组件内部，导致Header组件无法获取到这个局部状态。解决思路是状态提升——把共享状态移到两个组件的共同父组件中，再通过props传递状态和更新方法。

具体实现步骤 #

• 在父组件中定义useState管理计数值，同时编写更新计数的函数
• 将计数值通过props传给Header组件用于展示
• 将更新函数通过props传给Bottom组件，绑定到按钮的点击事件上

完整代码示例 #

父组件（App.js）

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import Header from './Header';
import Bottom from './Bottom';

export default function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <View style={styles.container}>
      <Header count={count} />
      <Bottom onIncrement={incrementCount} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    paddingTop: 50,
    paddingBottom: 50,
  },
});

Header组件（Header.js）

import React from 'react';
import { Text, StyleSheet } from 'react-native';

export default function Header({ count }) {
  return (
    <Text style={styles.headerText}>当前计数：{count}</Text>
  );
}

const styles = StyleSheet.create({
  headerText: {
    fontSize: 24,
    textAlign: 'center',
  },
});

Bottom组件（Bottom.js）

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function Bottom({ onIncrement }) {
  return (
    <TouchableOpacity style={styles.button} onPress={onIncrement}>
      <Text style={styles.buttonText}>点击增加计数</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
    marginHorizontal: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 18,
  },
});

为什么之前的方法无效 #

之前你把useState放在Bottom组件内部，这个状态是Bottom的局部状态，只能在自身组件内访问和修改。Header和Bottom是同级组件，没有直接的数据传递通道，所以通过props传递的方式无法生效——必须依赖共同父组件来中转状态。

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