React中Select组件结合JSON数组设置默认值的疑问

核心问题：受控 vs 非受控组件 #

你遇到的下拉框失效问题，是因为直接给select加了value属性，把它变成了受控组件——受控组件的选中值完全由你传入的value控制，不配合onChange更新值的话，就会固定在初始值无法修改。

而你需要的defaultValue是给非受控组件设置初始选中值用的，它只在组件首次渲染时生效，之后用户的选择会自动维护选中状态。

方案1：非受控组件（仅需设置初始默认值） #

直接在select标签上添加defaultValue，值对应你要默认选中的option的value属性（也就是item.value）。这里要默认选中value2，就把defaultValue设为'value2'：

import React from 'react';

const jsonArray = [
  { key: 'key1', value: 'value1' },
  { key: 'key2', value: 'value2' },
  { key: 'key3', value: 'value3' },
];

class MyComponent extends React.Component {
  render() {
    return (
      {/* 给select设置defaultValue，匹配option的value */}
      <select defaultValue="value2">
        {jsonArray.map((item) => (
          {/* 推荐用item.key作为key，比index更稳定 */}
          <option key={item.key} value={item.value}>
            {item.key}
          </option>
        ))}
      </select>
    );
  }
}

export default MyComponent;

方案2：受控组件（需要动态修改选中值） #

如果后续需要通过代码修改选中值，应该用受控组件：用state存储选中值，value绑定state，同时添加onChange事件更新state：

import React from 'react';

const jsonArray = [
  { key: 'key1', value: 'value1' },
  { key: 'key2', value: 'value2' },
  { key: 'key3', value: 'value3' },
];

class MyComponent extends React.Component {
  // 初始化state，默认选中value2
  state = {
    selectedValue: 'value2'
  };

  handleChange = (e) => {
    this.setState({
      selectedValue: e.target.value
    });
  };

  render() {
    return (
      <select 
        value={this.state.selectedValue}
        onChange={this.handleChange}
      >
        {jsonArray.map((item) => (
          <option key={item.key} value={item.value}>
            {item.key}
          </option>
        ))}
      </select>
    );
  }
}

export default MyComponent;

关键注意事项 #

• defaultValue和value都要放在select标签上，而不是option标签。
• 默认值必须匹配对应option的value属性值（这里是item.value），和item.key无关——因为option的选中是通过value来匹配的，item.key只是显示的文本。
• 尽量避免用index作为option的key，推荐用数据里的唯一标识（比如item.key或item.value），防止数组元素变动时出现渲染异常。

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