[英]Using react-select I've got next issue: Cannot read property 'value' of undefined
I'm using react-select
.我正在使用
react-select
。 When I'm selecting a determinate value from select I've got the next issue当我从 select 中选择一个确定的值时,我遇到了下一个问题
TypeError: Cannot read property 'value' of undefined
类型错误:无法读取未定义的属性“值”
Also, values fetched from reducer todoList
are not showed, I can't see them.此外,未显示从减速器
todoList
获取的值,我看不到它们。
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 });
};
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;
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
类型错误:无法读取未定义的属性“值”
The package react-select
directly returns the json
that has the value like包
react-select
直接返回具有类似值的json
{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我认为正如 react-select 的文档所说
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
this.handleChange will directly return the selected option rather then event object. this.handleChange 将直接返回选定的选项而不是事件对象。
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
and I think you don't need to bind the handleChange method as well.而且我认为您也不需要绑定 handleChange 方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.