如何在另一个组件反应选择中打印多选值？

Question

我想打印选择的多个值，但错误显示 null 上的映射是不可能的。但在一个人选择一个值之前，它必须为空。如何解决这个问题？下面是选项和其他代码。

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: null,
  };
  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={this.state.selectedOption} />
    </React.Fragment>
    );
  }
}

export default class PrintMultipleValues extends Component {
    render() {
        return this.props.multiplevalue.map( (value)=> (value && value.label) );
    }
}

Answer 1

你可以这样做 -

export default class PrintMultipleValues extends Component {
    render() {
        return (this.props.multiplevalue && this.props.multiplevalue.map( (value)=> (value && value.label) ));
    }
}