値がクリアされない

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

handleOnChangeに渡された値が実際の値ではなく、状態自身であるとして、それは

this.setState({ 
    value: chosenValue 
}); 

でなければなりません。