React Native组件间Props传递失效问题排查与解决

你的代码核心问题出在AddChild组件的Props传递和接收环节，具体修复步骤如下：

1. 父组件EditFamily传递Person数据给AddChild #

当前渲染AddChild时没有传入需要的person对象，而shouldShowAdd状态里已经存储了点击选中的人员数据，只需在渲染AddChild时把它传过去：

// 原代码
{shouldShowAddChild && <AddChild />}

// 修改后
{shouldShowAddChild && <AddChild person={shouldShowAdd} />}

2. AddChild组件正确接收并使用Person Props #

AddChild组件里尝试使用person.id，但既没在props中声明接收person，还错误声明了没用的setShouldShowAdd，修改如下：

// 原代码
export default function AddChild({ setShouldShowAdd }) {
  return (
    <View>
      <Text>hoi id:{person.id}</Text>
   </View>
  );
}

// 修改后
export default function AddChild({ person }) {
  // 可选：增加空值判断，避免person为null时报错
  if (!person) return null;
  
  return (
    <View>
      <Text>hoi id:{person.id}</Text>
    </View>
  );
}

额外验证建议 #

可以在Add组件的点击回调里补充日志，确认shouldShowAdd确实被设置为有效的人员对象：

onPress={() => {
  console.log('选中的人员：', person);
  setShouldShowAdd(person);
}}

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