React-select多选值跨组件打印及map空值报错解决方案

这个问题我之前也碰到过，本质就是当用户还没选择任何选项时，selectedOption的初始值是null，而null没有map方法，直接调用就会抛出错误。下面给你几个实用的解决办法：

方案1：初始化状态为空数组（最推荐） #

react-select的isMulti模式下，选中的值本身就是数组类型，所以把初始状态从null改成空数组[]才更符合组件的预期行为，从根源避免空值问题：

class MultiColors extends React.Component {
  // 把null改成[]
  state = { selectedOption: [], };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };
  // ... 其余代码不变
}

这样即使用户没选任何值，selectedOption也是一个空数组，空数组调用map不会报错，只会返回空结果。

方案2：在子组件中添加空值判断 #

如果不想修改父组件的初始状态，可以在PrintMultipleValues组件里先判断传入的multiplevalue是否有效，再执行map：

export default class PrintMultipleValues extends Component {
  render() {
    // 先判断是否为数组，再执行map；可选链+空值合并让代码更简洁
    return this.props.multiplevalue?.map(value => value.label) || [];
  }
}

这里用了可选链操作符?.（判断multiplevalue存在才调用map）和空值合并操作符||（如果前面结果为null/undefined，就返回空数组），确保不会因为空值报错。

方案3：传递props时设置默认值 #

在父组件传递multiplevalue的时候，直接给一个兜底的空数组：

// 父组件里修改传递props的代码
<PrintMultipleValues multiplevalue={this.state.selectedOption || []} />

这样就算selectedOption是null，子组件拿到的也是空数组，map操作就能正常执行。

完整修改后的代码示例 #

结合方案1和方案2，代码会更健壮：

const options = [ 
  { value: 'blue', label: 'Blue' }, 
  { value: 'green', label: 'Green' }, 
  { value: 'pink', label: 'Pink' }, 
  { value: 'grey', label: 'Grey' }, 
  { value: 'yellow', label: 'Yellow' } 
];

class MultiColors extends React.Component {
  state = { selectedOption: [], }; // 初始化为空数组
  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <React.Fragment>
        <nav className="NAVIGATION">
          <Link to="/">First Page</Link> | <Link to="/second-page">Second Page</Link>
        </nav>
        <h1 className="TITLE">Please choose your favourite colour</h1>
        <Select 
          className="MULTISELECT" 
          classNamePrefix="MULTISELECT__options" 
          value={selectedOption} 
          onChange={this.handleChange} 
          options={options} 
          styles={customStyles} 
          isMulti 
        />
        <PrintMultipleValues multiplevalue={selectedOption} />
      </React.Fragment>
    );
  }
}

export default class PrintMultipleValues extends Component {
  render() {
    // 双重保障：先判断是否存在，再map
    return (
      <div>
        {this.props.multiplevalue?.map((value, index) => (
          <span key={index}>{value.label}</span>
        ))}
      </div>
    );
  }
}

这样不管用户有没有选择选项，组件都能正常运行，不会再抛出错误啦～

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