React Native开发：如何从Numberplus子组件获取state并在App组件展示

要实现父组件读取子组件的数值状态，需采用 React 状态提升 的官方推荐模式：将原本定义在 Numberplus 内部的数值状态，移动到父组件 App 中统一管理，再通过 props 向子组件传递状态值和修改状态的方法，保证数据流单向可追踪。

现有代码的基础问题 #

• Numberplus 组件未导入 useState Hook，运行会直接抛出报错
• 状态修改方法拼写错误：setNamber 应为 setNumber
• 直接对 state 执行 ++Number 的操作违反 React 不可变状态规则，会导致状态更新异常

修改后的完整代码 #

App 组件（父组件） #

import React, { useState } from "react";
import { Text, View } from "react-native";
import Numberplus from "./Number";

function App() {
  // 状态提升到父组件统一维护
  const [Number, setNumber] = useState(0);

  return (
    <View>
      {/* 直接读取父组件的状态完成展示 */}
      <Text>{Number}</Text>
      {/* 向子组件传递状态修改方法 */}
      <Numberplus setNumber={setNumber} />
    </View>
  );
}

export default App;

Numberplus 组件（子组件） #

import React from "react";
import { Button, View } from "react-native";

// 接收父组件传递的修改状态方法
function Numberplus({ setNumber }) {
  return (
    <View>
      <Button
        onPress={() => {
          // 基于前一次状态值更新，符合 React 状态规则
          setNumber(prev => prev + 1);
        }}
        title="Plus"
      />
    </View>
  );
}

export default Numberplus;

实现逻辑说明 #

• React 采用单向数据流规则，子组件内部的私有 state 无法直接被父组件读取，状态提升是跨组件共享状态的标准解法
• 状态统一在父组件维护后，所有依赖该状态的组件（父组件的展示文本、子组件的按钮交互）都会自动同步最新值

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