传递状态时无法读取未定义的属性'map'并将其映射为 prop

Question

我正在尝试将状态从App.js组件传递到Home中存在的ShopsMap组件.js这是传递的代码

render() {
    const { shops, region } = this.state;
    return (
      <SafeAreaView>
        <ShopsMap shops={shops} region={region} />
      </SafeAreaView>
    );
  }
}

在主页中.js我有这个结构，其中我有ShopsMap和ShopsDetails组件，我尝试在这两个组件之间导航，如以下代码所示：

class ShopsMap extends Component {
  renderMarkers() {
    return this.props.shops.map((marker, i) => (
      <Marker key={i} title={marker.name} coordinate={marker.coords} >
      <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </Marker>
    ));
  }
  componentDidMount() { }
  render() {
    const region = this.props.region;
    return (
      <MapView
        region={region}
        showsUserLocation
        showsMyLocationButton
      >
        {this.renderMarkers()}
      </MapView>
    );
  }
}
class ShopsDetails extends Component {
  render() {
    return (
      <View>
        <Text>Details Screen</Text>
        <Button
          title="Go to Map"
          onPress={() => this.props.navigation.navigate('Map')}
        />
      </View>
    );
  }
}
const RootStack = createStackNavigator(
  {
    Map: {
      screen: ShopsMap,
    },
    Details: {
      screen: ShopsDetails,
    },
  },
  {
    initialRouteName: 'Map',
  }
);
const AppContainer = createAppContainer(RootStack);
export default class Home extends Component {
  render() {
    return <AppContainer />;
  }
}

我收到此错误无法读取未定义的属性"map"而当我家里只有 ShopsMap 时.js并直接导出这个类一切正常，但是当更改结构以在组件之间导航时，我收到此错误

Answer 1

请参考此页面以获取如何将参数传递到屏幕

Answer 2

有两个想法：

1-在家庭课上，尝试：

return <AppContainer {...this.props} />

---

2 - 在父组件中，尝试按如下方式传递道具：

<ShopsMap shops={this.state.shops} region={this.state.region} />