首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用react select我有下一个问题:无法读取未定义的属性值

使用react select我有下一个问题:无法读取未定义的属性值
EN

Stack Overflow用户
提问于 2020-03-02 12:30:16
回答 2查看 7K关注 0票数 0

我在用react-select。当我从select中选择一个确定的值时,我得到了下一个问题

TypeError:无法读取未定义的属性值

另外,从还原器todoList获取的值没有显示出来,我看不到它们。

这是我的密码:

代码语言:javascript
运行
复制
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 });
  };

  componentDidMount() {
    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;

预期的行为是下拉的,显示todo,当我选择todo值时,我不会出错。

TypeError:无法读取未定义

的属性值

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-02 12:42:48

react-select直接返回具有以下值的json

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

改变这个

代码语言:javascript
运行
复制
  handleChange = (e) =>{
  this.setState({selectedTodo: e.target.value});
  }

到这个

代码语言:javascript
运行
复制
handleChange = (e) =>{
  this.setState({selectedTodo: e});
  }
票数 6
EN

Stack Overflow用户

发布于 2020-03-02 12:38:10

我认为作为react select的文档

代码语言:javascript
运行
复制
 <Select
    value={selectedOption}
    onChange={this.handleChange}
    options={options}
  />

this.handleChange将直接返回所选选项,而不是事件对象。

代码语言:javascript
运行
复制
    handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

我认为您也不需要绑定handleChange方法。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60488902

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档