每当我要创建一个新的To Do而无需更改HTML和push()数组时,它都可以正常工作,但是只要触发onChange事件侦听器,我就会获得“ this.state.tasks.map是不是功能”。无法弄清楚可能是什么问题。
import React, { Component } from 'react';
import './CreateTask.css'
import CreatedTask from '../CreatedTask/CreatedTask';
import Aux from '../../hoc/Aux';
class CreateTask extends Component {
constructor(props){
super(props);
this.state = {
tasks : [
{member : '',
toDo : '',
dod : '',
time : ''
}
],
showTask : false
};
this.changeHandler = this.changeHandler.bind(this);
this.submitTask = this.submitTask.bind(this);
}
// onCHANGE HANDLER
changeHandler = (event) => {
this.setState(
{
tasks: {[event.target.name] : event.target.value}
}
)
}
clearFields = () => {
this.setState({
tasks : [
{member : '1212',
toDo : '1331',
dod : '121',
time : ''
}
],
showTask : false
})
}
submitTask=(event)=>{
this.setState({showTask:true});
let tasks = this.state.tasks;
tasks.push({
tasks: {[event.target.name] : event.target.value}
})
}
render() {
// STARTS HERE
let tasksubmit = null;
if(this.submitTask){
tasksubmit =
<div>
{this.state.tasks.map( task => {
return <CreatedTask
member = {task.member}
todo = {task.toDo}
dod = {task.dod}
time = {task.time}
/>
})}
</div>
}
// ENDS HERE
console.log(tasksubmit);
return(
<div>
<div className="CreateTask">
<p>Group member:
<select id="groupMember"
onChange={this.changeHandler}
name="member"
>
<option defaultValue='' selected disabled>Select group member</option>
<option value="Berin">Berin</option>
<option value="Raddy">Raddy</option>
<option value="Ventsi">Ventsi</option>
<option value="Cristian">Cristian</option>
</select>
</p>
<p>To do:<input
type="text"
id="toDo"
name="toDo"
value={this.state.toDo}
onChange={this.changeHandler}>
</input>
</p>
<p>Definiton of done:
<textarea
id="dod"
name="dod"
value={this.state.dod}
onChange={this.changeHandler}>
</textarea>
</p>
<p>Average time required(hours):
<input
value = {this.state.time}
onChange = {this.changeHandler}
type="number"
min="0"
id="time"
name="time">
</input>
</p>
<div>
<button type="submit" onClick = {this.clearFields}>Cancel</button>
<button type="submit" onClick = {this.submitTask}>Create</button>
</div>
</div>
{tasksubmit}
</div>
);
} }
export default CreateTask;
我还是React的新手,我知道我应该将一些函数bind()到构造函数,但是我不知道如何绑定它。
答案 0 :(得分:1)
您第一次在setState
函数中调用changeHandler
时,会将tasks
设置为对象。因此,它不再是数组,并且无法使用Array.map
遍历对象。
查看此处:
changeHandler = (event) => {
this.setState({
tasks: {[event.target.name] : event.target.value} // Your setting to an object here. Tasks was an array and here you change it to {name: value}
});
}
您可以更改为以下内容:
changeHandler = (event) => {
let memberTasks = this.state.tasks.filter((task) => task.member === event.target.value)
this.setState({
tasks: memberTasks
})
}