React中如何获取axios get请求响应值 解决下拉框显示[object][object]问题

你的代码存在3个核心问题，最终导致打印和展示异常：

• 遍历响应数据的逻辑错误：你在response.data.map的遍历中，每次都把数组变量Items覆盖为当前单个元素对象，且每次遍历都执行setState，最终locations只会存储响应数组的最后一项，且是对象类型而非数组类型
• 打印方式和时机错误：setState是异步更新API，调用后立即读取this.state.locations拿到的还是旧值；同时你用字符串拼接对象的方式打印，JS会自动将对象转为[object Object]字符串，无法查看实际内容
• 下拉渲染逻辑错误：如果渲染下拉选项时直接将整个对象作为展示内容，也会直接显示[object Object]，需要读取对象对应的展示字段

componentDidMount = () => {
  this.getLocations();
};

getLocations = () => {
  axios.get('https://localhost:44303/api/observation/GetLocations').then(response => {
    // 直接将完整响应数组赋值给locations，无需额外遍历
    this.setState({ locations: response.data }, () => {
      // setState第二个参数为更新完成回调，此处可拿到最新state；用逗号分隔打印可正常查看对象内容
      console.log('DDL:', this.state.locations);
    });
  }).catch(err => {
    console.error('获取位置数据失败：', err);
  })
};

渲染时需要根据接口返回的实际字段，绑定选项的唯一值和展示文本，示例如下（请替换为你实际的字段名）：

<select>
  {this.state.locations?.map(item => (
    // 假设接口返回字段为id（唯一标识）、locationName（展示名称），根据实际返回调整即可
    <option key={item.id} value={item.id}>{item.locationName}</option>
  ))}
</select>

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