javascript - Using react-select I've got next issue: Cannot read property 'value' of undefined - Stack O

admin管理员组

文章数量:1278720

I'm using react-select. When I'm selecting a determinate value from select I've got the next issue

TypeError: Cannot read property 'value' of undefined

Also, values fetched from reducer todoList are not showed, I can't see them.

This is my code:

import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";

class SelectedTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTodo: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  bringTodos = () => {
    //WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
    return this.props.todoList.map(todo => {
      return (
        <option key={todo._id} value={todo._id}>
          {todo.name}
        </option>
      );
    });
  };

  handleChange = e => {
    this.setState({ selectedTodo: e.target.value });
  };

  ponentDidMount() {
    this.props.searchTodos();
  }

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

    if (loading) {
      return <span>...Loading</span>;
    }
    return (
      <Select
        className="form-container"
        classNamePrefix="react-select"
        placeholder="Please, insert a todo"
        value={this.state.selectedTodo}
        onChange={this.handleChange}
        options={this.bringTodos()}
      />
    );
  }
}

function mapState(state) {
  return {
    todoList: state.todosDs.todoList
  };
}
const actions = {
  searchTodos
};
SelectedTodo = connect(
  mapState,
  actions
)(SelectedTodo);

export default SelectedTodo;

The expected behavior is dropdown shows todos and when I'm selecting a todo value I'm not getting error

TypeError: Cannot read property 'value' of undefined

I'm using react-select. When I'm selecting a determinate value from select I've got the next issue

TypeError: Cannot read property 'value' of undefined

Also, values fetched from reducer todoList are not showed, I can't see them.

This is my code:

import Select from "react-select";
import "./styles.css";
import { searchTodos } from "../../actions/ServiceActions";

class SelectedTodo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTodo: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  bringTodos = () => {
    //WHEN I'M EXECUTING THESE CODE LINES I CAN'T SEE TODOS VALUES
    return this.props.todoList.map(todo => {
      return (
        <option key={todo._id} value={todo._id}>
          {todo.name}
        </option>
      );
    });
  };

  handleChange = e => {
    this.setState({ selectedTodo: e.target.value });
  };

  ponentDidMount() {
    this.props.searchTodos();
  }

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

    if (loading) {
      return <span>...Loading</span>;
    }
    return (
      <Select
        className="form-container"
        classNamePrefix="react-select"
        placeholder="Please, insert a todo"
        value={this.state.selectedTodo}
        onChange={this.handleChange}
        options={this.bringTodos()}
      />
    );
  }
}

function mapState(state) {
  return {
    todoList: state.todosDs.todoList
  };
}
const actions = {
  searchTodos
};
SelectedTodo = connect(
  mapState,
  actions
)(SelectedTodo);

export default SelectedTodo;

The expected behavior is dropdown shows todos and when I'm selecting a todo value I'm not getting error

TypeError: Cannot read property 'value' of undefined

• javascript
• reactjs
• redux
• redux-form
• react-select

Share Improve this question Follow edited Mar 2, 2020 at 13:07 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Mar 2, 2020 at 12:30 CatMouse2020CatMouse2020 9911 gold badge33 silver badges1212 bronze badges 1

• I think removing this.handleChange = this.handleChange.bind(this); and this.setState({selectedTodo: e}); will get you the selected option value – sourav satyam Commented Mar 2, 2020 at 12:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

The package react-select directly returns the json that has the value like

{label:"ABC", value:"abc"}

Change this

  handleChange = (e) =>{
  this.setState({selectedTodo: e.target.value});
  }

To this

handleChange = (e) =>{
  this.setState({selectedTodo: e});
  }

I think as the documentation of react-select says

 <Select
    value={selectedOption}
    onChange={this.handleChange}
    options={options}
  />

this.handleChange will directly return the selected option rather then event object.

    handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

and I think you don't need to bind the handleChange method as well.

本文标签： javascriptUsing reactselect I39ve got next issue Cannot read property 39value39 of undefinedStack Overflow