我在用着react-select
。当我从 select 中选择一个确定值时,我遇到了下一个问题
类型错误:无法读取未定义的属性“值”
另外,从reducer获取的值todoList
没有显示,我看不到它们。
这是我的代码:
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;
预期的行为是下拉列表显示待办事项,当我选择待办事项值时,我没有收到错误
类型错误:无法读取未定义的属性“值”
套餐react-select
直接返回json
其值类似于
{label:"ABC", value:"abc"}
改变这个
handleChange = (e) =>{
this.setState({selectedTodo: e.target.value});
}
To this
handleChange = (e) =>{
this.setState({selectedTodo: e});
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)