ReactJS下拉菜单无法使用.map渲染数据问题求助

核心问题分析 #

你当前代码的关键错误是：Axios请求返回的response是包含data、status等字段的对象，而非直接的数组数据。直接把整个response赋值给disastertype状态，导致后续map遍历失败（对象没有map方法），页面因此空白。

另外还有一个细节问题：React元素中需用className替代原生HTML的class属性，避免样式或组件行为异常。

修正后的代码 #

状态更新逻辑 #

const [disastertype, setDisastertype] = useState([]); // 变量名遵循小驼峰规范，符合React编码习惯

useEffect(()=>{
  Axios.get("http://localhost:3001/api/disasterinfo")
    .then((response)=>{
      // 取response内的data字段，这才是接口返回的数组数据
      setDisastertype(response.data);
      console.log(response.data); // 打印真实数据确认结构
    })
    .catch(err => {
      // 添加错误捕获，快速排查请求失败原因（如跨域、后端接口异常）
      console.error('请求失败:', err);
    })
},[])

下拉菜单渲染部分 #

<td>
  <div className="dropdown">
    <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      Disaster Type
    </button>
    <ul className="dropdown-menu">
      {disastertype.map((val)=>(
        <li key={val.disaster_type}> {/* key需绑定在遍历的最外层元素上 */}
          <a className="dropdown-item">{val.disaster_type}</a>
        </li>
      ))}
    </ul>
  </div>
</td>

额外检查项 #

1. 确认response.data是数组：控制台打印response.data，验证是否为你期望的数组结构。
2. 检查API返回字段：确保数组内每个元素都包含disaster_type字段，否则渲染时会显示空白。
3. 排查请求异常：通过catch块的错误信息，快速定位跨域、后端接口报错等问题。

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