刷新页面后React下拉框填充失败，报Cannot set properties of null错误

原因分析 #

你直接在组件函数执行阶段调用document.getElementById('color').innerHTML = option，这时候React还没完成组件的渲染，<select id="color">元素还没被挂载到浏览器的DOM树上，所以getElementById返回的是null，自然没法设置它的innerHTML，这就是报错Cannot set properties of null (setting 'innerHTML')的核心原因。首次加载偶尔能正常显示是DOM挂载时机的偶然巧合，但刷新页面时这个时序问题就会必然暴露。

正确解决方法 #

React是声明式框架，不需要手动操作DOM修改内容，直接通过JSX声明你想要的UI结构即可。你可以把颜色数组映射成<option>元素，然后直接在<select>里渲染这些选项。

修改后的完整代码：

import './App.css';
import React from "react";

function App() {
  const colors = ["green", "blue"]; 

  const handleChange = event => {
    console.log(event.target.value);
  };  

  return (
    <div className="App">
      <div className="form-group">
        <select onChange={handleChange} className="form-control" name="" id="color">
          {/* 映射数组生成option元素 */}
          {colors.map(color => (
            <option key={color} value={color}>
              {color}
            </option>
          ))}
        </select>
      </div>
    </div> 
  );
}

export default App;

关键修改说明 #

• 用colors.map()把数组中的每个颜色转换成对应的<option>元素，React会自动完成DOM渲染，完全替代手动操作innerHTML的逻辑
• 给每个<option>添加key属性（这里用颜色值作为key，因为颜色值唯一），这是React列表渲染的强制要求，用于帮助React高效识别列表项的变化
• 将原代码中的class替换为className，这是React中指定CSS类名的标准写法（避免和JavaScript关键字class冲突）

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