React中useEffect赋值users数组渲染下拉框时触发map未定义错误

这个报错的核心原因很明确：在执行map的时候，state.users的值是undefined。虽然你在useEffect里会给users赋值，但useEffect是组件完成首次渲染后才会触发的，而且如果你的state初始化时没有给users设置默认值，那在组件的某些重渲染场景（比如你点击其他输入框触发的重渲染）中，state.users就会处于undefined状态，导致map调用失败。

下面是具体的修复方案：

方案1：初始化state时设置默认空数组 #

这是最稳妥的方式，从根源上避免users为undefined的情况：

// 假设你用的是useState，初始化时给users设为空数组
const [state, setState] = useState({ users: [], username: '' });

useEffect(() => {
  setState({ users: ['test user', 'lokesh'], username: 'test user' });
}, []); // 注意这里加上空依赖数组，只在组件挂载时执行一次

这里额外提醒一下：你的useEffect没有加依赖数组，会导致每次组件渲染都执行setState，可能引发不必要的重渲染，加上空数组就能让它只运行一次。

方案2：在map前添加存在性检查 #

如果因为某些原因没法初始化默认值，可以在调用map之前先判断state.users是否存在：

<select ref={dropdown} required className="form-control" value={state.username} onChange={onChangeUsername} >
  {/* 先用可选链确保users存在再执行map */}
  {state.users?.map(user => {
    return (
      <option key={user} value={user}> {user} </option>
    )
  })}
</select>

或者用更兼容的条件判断（如果你的环境不支持可选链语法）：

{state.users && state.users.map(user => {
  return (
    <option key={user} value={user}> {user} </option>
  )
})}

另外还有个小细节：你的<label>标签里的for属性，在JSX里应该写成htmlFor，否则会出现语法警告：

<label htmlFor="username">Username</label>

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