Question

我使用react-select进行简单的下拉菜单。我可以选择一个值并传递我的选项列表而没有任何问题，但每当我尝试删除一个选定的选项时，我会收到一个错误说：

Uncaught TypeError: Cannot read property 'value' of null
    at Object.FieldDropDown._this.handleOnChange [as onChange] (bundle.js:102446)
    at Select.setValue (bundle.js:100361)
    at Select.clearValue (bundle.js:100437)
    at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:28939)
    at executeDispatch (bundle.js:28723)
    at Object.executeDispatchesInOrder (bundle.js:28743)
    at executeDispatchesAndRelease (bundle.js:24125)
    at executeDispatchesAndReleaseTopLevel (bundle.js:24136)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (bundle.js:35156)

我的组件实现非常简单：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import _ from 'lodash';

import styles from './FieldDropDown.scss';

class FieldDropDown extends Component{

    constructor(props){
        super(props);

        this.state = {
            value: null
        }
    }

    handleOnChange = (chosenValue) => {
        this.setState({
            value: chosenValue.value
        });
    };


    render(){
        const {options} = this.props;

        return (
            <Select
                name="form-field-name"
                value={this.state.value}
                options={options}
                onChange={this.handleOnChange}
                className={styles.wrapper}
            />
        );
    }
}

FieldDropDown.propTypes = {
    options: PropTypes.arrayOf(PropTypes.any)
};

export default FieldDropDown;

Answer 1

应该是

this.setState({
  value: chosenValue
});

由于传递给handleOnChange的值是实际值，而不是状态本身。

清除值不起作用

1 个答案: