React Native：DropdownModal无法展示API获取的地址数据求助

我帮你排查了代码里的几个关键问题，调整后就能让下拉框正常显示地址数据了，具体修改点如下：

1. 修正地址状态的初始值 #

你的state里address初始设为空字符串''，但API返回的是数组类型，初始值不匹配会导致后续map操作出错，而且ModalDropdown遇到options为null时会显示加载状态。把初始值改成空数组：

constructor(props) {
  super(props);
  this.state = {
    event_id: '',
    tshirt_size: '',
    size: '',
    address: [], // 从''改为空数组
    addressx: '',
  };
  // ...其他绑定逻辑
}

2. 调整Dropdown的options判断与展示内容 #

原来的options判断逻辑是检查address !== ''，现在address是数组，应该判断数组长度；另外你之前只返回address.id，用户看不到实际地址信息，建议组合姓名、州、国家等字段：

<ModalDropdown
  dropdownStyle={styles.dropdown}
  style={styles.dropdown}
  dropdownTextStyle={{fontSize:15}}
  onSelect={(index, value) => {
    this.setAddress(value);
  }}
  options={
    this.state.address.length > 0 
      ? this.state.address.map(address => `${address.name} - ${address.state}, ${address.country}`)
      : []
  }
>
  {/* ...下拉框触发视图 */}
</ModalDropdown>

3. 修复API请求的错误处理逻辑 #

你的getAddresses函数中，catch块里调用error.json()是错误的——fetch的catch捕获的是网络错误，此时error并非Response对象，无法调用json()，修改成更稳妥的错误处理：

export function getAddresses(data, callback) {
  AsyncStorage.getItem('token').then(value => {
    const token = JSON.parse(value);
    fetch('https:apiurl.com', {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'bearer' + token.access_token,
      },
    })
    .then(response => response.json())
    .then(response => callback(response.data))
    .catch(error => {
      console.error('获取地址失败:', error);
      callback(false, null, error.message);
    });
  });
}

4. 确保API返回数据是数组类型 #

在onResult方法中，加一层判断确保拿到的数据是数组，避免非数组数据导致map报错：

onResult(result) {
  // 确保返回的是数组，若API返回单个对象则转成数组
  const addressList = Array.isArray(result) ? result : [];
  this.setState({
    address: addressList,
  });
}

做完这些修改后，ModalDropdown应该就能正常渲染从API获取的地址选项了——初始状态下拉框会显示"Select Address"，当API数据返回后，下拉选项会自动更新为对应的地址信息。

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