React Native 如何将数组值填充到下拉框 选中后自动填充对应UI字段

• 第一步：将接口返回的contactMedium数组转换为下拉组件适配的选项格式，默认你用的SelectField组件的options参数接收的数组元素包含展示用的label和取值用的value，我们可以存选中项的索引方便后续取完整数据：

// 接口请求成功拿到contactMedium数据后做格式转换
const addressOptions = contactMedium.map((item, index) => ({
  label: item.name, // 下拉选项展示的就是name字段值
  value: index
}))
// 把转换后的选项和选中索引存到state中，和你原有state字段共存即可
this.setState({
  addressOptions,
  selectedAddressIndex: null
})

• 第二步：在表单最上方（地址标题输入框之前）新增地址选择下拉组件，供用户选择已有地址：

<View style={{ padding: 15 }}>
{/* 新增的选择地址下拉 */}
<View style={{ marginTop: 15 }}>
    <SelectField
        label="选择已有地址"
        options={this.state.addressOptions}
        value={this.state.selectedAddressIndex}
        onChange={(key, value) => this.handleAddressSelect(value)}
        that={this}
        setIcon={true}
        textColor='#4A494A'
    />
</View>
{/* 原有表单代码保持不变 */}
<View style={{ marginTop: 15 }}>
    <View style={{
        flexDirection: 'row', backgroundColor: '#fff'
    }}>
        <RegularText text={`Address Title`} style={{ fontSize: hp('1.5%'), color: 'grey' }} />
    </View>
    {/* 剩余原有代码不需要改动 */}
</View>

• 第三步：实现选中下拉项后的自动填充逻辑，直接复用你现有表单的赋值方法即可：

handleAddressSelect = (selectedIndex) => {
  // 保存选中的索引
  this.setState({
    selectedAddressIndex: selectedIndex
  })
  // 拿到选中的完整地址数据
  const selectedAddress = contactMedium[selectedIndex]
  if (!selectedAddress) return
  const { name, medium } = selectedAddress
  // 按你原有表单的赋值方法逐个填充字段
  this.onChange(name, 'AddTitle', 'change')
  this.onChange(medium.addressLine1, 'Address1', 'change')
  this.onPickerChange(medium.country, 'Country')
  this.onPickerChange(medium.stateOrProvince, 'Region')
  // 如果你后续要加地址行2、邮编、城市等字段，按照上面的格式继续赋值即可
}

补充说明：如果你的SelectField的onChange回调返回的不是索引，你可以把options的value设置为每个地址的id字段，选中后通过contactMedium.find(item => item.id === 选中的id)拿到对应数据即可，逻辑完全一致。

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