Klare Werte funktionieren nicht

Question

Ich verwende react-select für ein einfaches Dropdown-Menü. Ich kann einen Wert gewählt und ohne Probleme meine Optionen Liste übergeben, aber wenn ich versuche, eine gewählte Option zu löschen erhalte ich eine Fehlermeldung, dass:

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) 

Meine Komponente Implementierung ist ziemlich einfach:

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

Es sollte

this.setState({ 
    value: chosenValue 
}); 

sein als der Wert, der handleOnChange geben wird der tatsächliche Wert, nicht der Staat selbst.