Material UI Select初始选中项不生效问题求助

这个问题的核心原因是：Material UI的Select组件默认使用引用相等（===）来判断选项是否被选中。你初始化的selectedOptions里的对象和availableOptions里的对象虽然内容完全一致，但它们是不同的对象实例（内存引用不同），所以组件无法识别这些是已选中的选项，再次选择时就会重复添加。

下面提供两种无需修改availableOptions类型的修复方案：

方案一：自定义选项比较逻辑（推荐，改动最小） #

给Select组件添加isOptionEqualToValue属性，自定义判断选项和选中值是否相等的逻辑，比如通过对象的唯一标识字段（比如combined或friendly）来比较，而不是依赖对象引用。

修改后的代码如下：

import React, { Component } from "react";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";

export default class renderFixedField extends Component {
  state = {
    availableOptions: [],
    selectedOptions: []
  };

  componentWillMount = () => {
    const availableOptions = [
      { friendly: "code1", combined: "[c1] - (code1)" },
      { friendly: "code2", combined: "[c2] - (code2)" },
      { friendly: "code3", combined: "[c3] - (code3)" },
      { friendly: "code4", combined: "[c4] - (code4)" }
    ];
    // 优化：直接从availableOptions中筛选选中项，避免手动重复创建对象
    const selectedOptions = availableOptions.filter(opt => 
      ["code1", "code2"].includes(opt.friendly)
    );
    this.setState({ availableOptions, selectedOptions });
  };

  handleChange = (event, values) => {
    const selectedOptions = event ? event.target.value : values;
    this.setState({ selectedOptions });
  };

  menuItems = () => {
    const { availableOptions } = this.state;
    return availableOptions.map(optionName => {
      return (
        <MenuItem value={optionName}>
          <ListItemText primary={optionName.friendly} />
        </MenuItem>
      );
    });
  };

  render() {
    const { selectedOptions } = this.state;
    return (
      <FormControl>
        <Select
          multiple
          value={selectedOptions}
          onChange={this.handleChange}
          renderValue={() => selectedOptions.map(el => el.friendly).join(", ")}
          children={this.menuItems()}
          // 新增：自定义选项与选中值的比较逻辑
          isOptionEqualToValue={(option, value) => option.combined === value.combined}
        />
      </FormControl>
    );
  }
}

关键改动说明： #

1. 添加isOptionEqualToValue属性，通过combined字段（唯一标识）来判断选项和选中值是否相等，不再依赖对象引用。
2. 优化了selectedOptions的初始化方式，直接从availableOptions中筛选，避免手动创建重复对象（这一步不是必须，但能减少冗余代码和出错概率）。

方案二：使用唯一标识作为选项值 #

如果不想自定义比较逻辑，可以把MenuItem的value设置为对象的唯一标识（比如combined），然后在状态中存储标识数组，再通过映射转换为对象数组供组件使用。

这种方案需要修改状态存储的类型，但不需要改动availableOptions的结构：

import React, { Component } from "react";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";

export default class renderFixedField extends Component {
  state = {
    availableOptions: [],
    selectedOptionKeys: [] // 改为存储唯一标识数组
  };

  componentWillMount = () => {
    const availableOptions = [
      { friendly: "code1", combined: "[c1] - (code1)" },
      { friendly: "code2", combined: "[c2] - (code2)" },
      { friendly: "code3", combined: "[c3] - (code3)" },
      { friendly: "code4", combined: "[c4] - (code4)" }
    ];
    // 存储选中项的唯一标识
    const selectedOptionKeys = availableOptions
      .filter(opt => ["code1", "code2"].includes(opt.friendly))
      .map(opt => opt.combined);
    this.setState({ availableOptions, selectedOptionKeys });
  };

  handleChange = (event, values) => {
    const selectedOptionKeys = event ? event.target.value : values;
    this.setState({ selectedOptionKeys });
  };

  // 辅助方法：将标识数组转换为对象数组
  getSelectedOptions = () => {
    return this.state.availableOptions.filter(opt => 
      this.state.selectedOptionKeys.includes(opt.combined)
    );
  };

  menuItems = () => {
    const { availableOptions } = this.state;
    return availableOptions.map(optionName => {
      return (
        <MenuItem value={optionName.combined}> {/* value改为唯一标识 */}
          <ListItemText primary={optionName.friendly} />
        </MenuItem>
      );
    });
  };

  render() {
    const selectedOptions = this.getSelectedOptions();
    return (
      <FormControl>
        <Select
          multiple
          value={this.state.selectedOptionKeys}
          onChange={this.handleChange}
          renderValue={() => selectedOptions.map(el => el.friendly).join(", ")}
          children={this.menuItems()}
        />
      </FormControl>
    );
  }
}

关键改动说明： #

1. 将状态selectedOptions改为selectedOptionKeys，存储选项的唯一标识字符串。
2. MenuItem的value设置为optionName.combined，不再是整个对象。
3. 添加getSelectedOptions方法，将标识数组转换为对应的对象数组，用于显示选中内容。

两种方案都能解决你的问题，方案一更简洁，推荐优先使用。

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