React Native：子组件向父组件传递数组状态失败问题排查

嘿，我一眼就发现问题所在啦！你父组件Screen1里虽然定义了用来接收数据的updateData方法，但完全没把这个方法传递给子组件——子组件根本不知道要把数据传给谁，父组件自然拿不到任何内容。而且你贴的render代码里也没看到子组件的调用逻辑，估计是省略了这部分，这也是关键遗漏点。

下面给你一步步解决：

1. 把父组件的回调方法传给子组件 #

首先，你需要在父组件中引入子组件时，把updateData作为props传递过去。分两种情况：

• 如果是用导航跳转（比如react-navigation）：

// 假设你用Button跳转到子组件Screen2
<Button 
  onPress={() => navigation.navigate('Screen2', { updateData: this.updateData })}
>
  进入子组件选择数据
</Button>

• 如果是嵌套子组件：

// 直接把方法作为props传给子组件
<ChildComponent updateData={this.updateData} />

2. 子组件点击返回时调用回调传数据 #

在子组件中，点击返回按钮的时候，调用父组件传过来的updateData方法，把你的数组状态传递回去，然后再执行返回操作：

// 子组件中的返回按钮逻辑
<Button 
  onPress={() => {
    // 假设子组件的数组状态是selectedItems
    this.props.updateData(this.state.selectedItems);
    // 执行返回，比如用navigation.goBack()
    this.props.navigation.goBack();
  }}
>
  返回父组件
</Button>

3. 修复父组件的alert显示问题 #

你父组件里的alert(this.state.selectedRecord)可能看不到真实内容，如果数组里是对象的话，alert只会显示[object Object]，建议改成：

<Button onPress={() => alert(JSON.stringify(this.state.selectedRecord))}> 
  Show Value 
</Button>

这样就能看到数组的具体内容了。

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