javascript - React.js map() 不是一个函数？

Question

每当我想创建一个新的待办事项而不更改 HTML 中的任何内容并推送()数组时，它都可以正常工作，但只要我触发 onChange 事件监听器，我就会得到“this.state.tasks.map is不是一个函数”。无法弄清楚可能的问题是什么。

    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)到构造函数，但我不知道如何绑定(bind)它。

Answer 1

第一次在 changeHandler 函数中调用 setState 时，您将 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
    })
}