反应式多选，不能选择多个值

Question

我有一个可解析为对象数组的api，类似这样

[
{flagUrl : 'http://....' , name : India , id : 7},
{flagUrl : 'http://....' , name : USA , id : 2},
{flagUrl : 'http://....' , name : Australia , id : 8},
....
]

然后是Im使用https://www.npmjs.com/package/react-native-select-multiple，此程序包将通过上面的链接创建一个多选列表。

[我想要的是，首先我可以显示用户可以选择的国家/地区列表，说两个国家（我可以使用提供的道具控制最大选择），然后我想要当用户转到下一页时，我可以得到什么id用户已在上一个屏幕中选择。目前，我试图显示相同的内容，并且仅显示我现在可以显示的国家/地区列表，然后我无法获取其ID。这是我到目前为止尝试过的

<SelectMultiple
        items={this.state.countryList.map((x) => x.name)}
        selectedItems={this.state.selectedCountries}
        onSelectionsChange={this.onSelectionsChange}
        maxSelect={2}
        />

其中countrylist具有上述数组，这是我使用的功能

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
  }

并且selectedItems在我的状态下只是一个空数组。

所以我只想呈现一个国家列表，用户选择其中的几个，然后我就可以通过this.props.navigate...将国家/地区选择的ID发送到下一个屏幕让我知道您是否需要其他信息。在此先感谢：）

Answer 1

您的国家/地区列表必须是标签和类似的值

 <SelectMultiple
     items={this.state.countryList.map((x) => ({ name: x.name, value:x.id })}
     selectedItems={this.state.selectedCountries}
     onSelectionsChange={this.onSelectionsChange}
     maxSelect={2}
 />

onSelectionsChange方法应该相同

onSelectionsChange = (selectedCountries) => {
    this.setState({ selectedCountries })
}

然后，当您想移至另一个屏幕时，>]

 moveToAnotherPage =() => {
   const { selectedCountries } = this.state;
   const { navigation } = this.props;
   const ids = selectedCountries.map(item => item.value);
   navigation.navigate('ScreenName', {ids});
  }