使用 react-select 我有下一个问题:无法读取未定义的属性“值" [英] Using react-select I've got next issue: Cannot read property 'value' of undefined
问题描述
我正在使用 react-select
.当我从 select 中选择一个确定的值时,我遇到了下一个问题
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
此外,从reducer todoList
获取的值没有显示,我看不到它们.
Also, values fetched from reducer todoList
are not showed, I can't see them.
这是我的代码:
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
推荐答案
react-select
包直接返回json
,其值类似于
The package react-select
directly returns the json
that has the value like
{label:"ABC", value:"abc"}
改变这个
handleChange = (e) =>{
this.setState({selectedTodo: e.target.value});
}
为此
handleChange = (e) =>{
this.setState({selectedTodo: e});
}
这篇关于使用 react-select 我有下一个问题:无法读取未定义的属性“值"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!