Javascript 如何为多个选择器设置选定值

我有一个带有按钮的屏幕，按下按钮后，将呈现一个带有选择器的新视图。如果这些选择器都应该彼此独立，我如何为它们设置selectedValue

我尝试使用数组和传递索引作为视图生成函数的参数，但这似乎不起作用

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

export default class SessionScreen extends React.Component {
  state = {
    externalData: ["Player1", "Player2", "Player3", "Player4"],
    view: [],
    selectedPlayers: []
  };

  async view(index) {
    let players = this.state.externalData.map((s, i) => {
      return <Picker.Item key={i} value={s} label={s} />;
    });
    let newVal = (
      <View
        key={this.state.selectedPlayers[index] + "view" + index}
        style={{ flex: 1, flexDirection: "column", paddingTop: 60 }}
      >
        <View style={{ flexDirection: "row" }}>
          <Picker
            key={this.state.selectedPlayers[index] + "picker" + index}
            selectedValue={this.state.selectedPlayers[index - 1]}
            style={{ height: 50, width: 200 }}
            onValueChange={itemValue =>
              this.setState(prevState => ({
                selectedPlayers: [...prevState.selectedPlayers, itemValue]
              }))
            }
          >
            {players}
          </Picker>
        </View>
      </View>
    );
    await this.setState(prevState => ({
      view: [...prevState.view, newVal]
    }));
  }

  async addPlayer() {
    await this.view(this.state.selectedPlayers.length);
  }

  render() {
    var returnValue = [];
    if (this.state.view.length > 0) returnValue = [...this.state.view];
    returnValue.push(
      <View
        key={returnValue.length + 1}
        style={{ flex: 1, flexDirection: "column", paddingTop: 100 }}
      >
        <Button
          title="Add a player"
          onPress={this.addPlayer.bind(this)}
          accessibilityLabel="Add a new player to the table"
        >
          Add a player
        </Button>
      </View>
    );
    return returnValue;
  }
}

从“React”导入React；
从“react native”导入{View，Picker，Button}；
导出默认类会话屏幕扩展React.Component{
状态={
外部数据：[“Player1”、“Player2”、“Player3”、“Player4”]，
视图：[]，
选定玩家：[]
};
异步视图（索引）{
让players=this.state.externalData.map（（s，i）=>{
返回；
});
设newVal=(
this.setState（prevState=>({
SelectedPlayer:[…prevState.SelectedPlayer，itemValue]
}))
}
>
{玩家}
);
等待此消息。设置状态（prevState=>({
视图：[…prevState.view，newVal]
}));
}
异步addPlayer（）{
等待这个.view（this.state.selectedPlayers.length）；
}
render（）{
var returnValue=[]；
如果（this.state.view.length>0）returnValue=[…this.state.view]；
返回值(
添加一个玩家
);
返回值；
}
}

当按下“添加播放机”按钮时，屏幕上会出现一个新的选择器。当我从给定的项目中选择不同的值时，它仍然显示“Player1”。但当我再次按下“添加玩家”时，我在第一个选择器中选择的值将出现在第二个选择器中

我确信这不是解决这个问题的最佳方法，我愿意听取建议。 顺便说一下，这是我第三天尝试用react native做些什么，或者干脆用react