React中动态创建select下拉菜单选项的实现方案

代码现存问题 #

• 状态赋值类型错误：stateList初始值定义为数组，接口请求成功后却传入对象{states: initialStates}更新状态，导致后续调用数组map方法时报错。
• 事件函数缺少参数：handleLocation未定义事件形参e，直接访问e.target.value会触发引用错误。
• 选项渲染逻辑冗余且错误：
  • 接口返回的结果本身就是州数据数组，不需要额外调用map遍历返回自身做无用操作
  • 不需要调用Object.keys()遍历对象属性，数组的每一项就是单个州对象，可直接访问内部sigla（州缩写）、nome（州名）字段
  • map渲染列表时未返回JSX元素、未设置唯一key属性，会导致渲染结果为空、React抛出警告。

修复后完整代码 #

import { EmailIcon, LocationIcon } from './assets/FormSvgIcons'
import { useEffect, useState } from 'react';

const SettingsForm = () => {
  const [stateList, setStateList] = useState([]);
  const [userLocation, setUserLocation] = useState('');

  // 补全事件参数
  const handleLocation = (e) => {
    setUserLocation(e.target.value);
  }

  useEffect(() => {
    fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados/')
      .then(response => response.json())
      .then(data => {
        // 直接存储接口返回的数组即可
        setStateList(data);
      });
  }, []);

  // 直接遍历stateList生成选项
  const createDropdownOptions = () => {
    return stateList.map((state) => (
      <option key={state.id} value={state.sigla}>
        {state.sigla} - {state.nome}
      </option>
    ));
  }

  return (
    <form>
      <div className="user-country">
        <label className="white-label">
          Local
        </label>
        <div className="input-icon-wrapper">
          <div className="icon-input w-embed">
            <LocationIcon />
          </div>
          <select 
            className="select-field white-select w-select"
            id="locationField"
            name="locationField"
            value={userLocation}
            onChange={handleLocation}
          >
            <option value="">请选择所在州</option>
            {createDropdownOptions()}
          </select>
        </div>
      </div>
    </form>
  )
}

补充优化：给select标签绑定value属性对应状态值，做成标准受控组件，新增默认空选项提升交互体验。

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