反应：为什么新任务（在复选框中）未定义？

Question

我是 react 新手，所以我尝试使用它来执行任务应用程序，但由于某种原因，当我尝试“检查”任务时，我在 const newTasks 中给出了错误，我是否尝试过给出一个初始值，并通过控制台显示它，但只是出现该值，可以形成过滤方法？？？？

tasks.json // 样本数据

[
        {
            "id": 0,
            "title": "espada",
            "description": "esta es un arma japonesa que bla bla bla bla bla bla bla bla",
            "done" : false
        },
        {
            "id": 1,
            "title": "pistola",
            "description": "pistola semi-automatica que sirve para pegar tiros bla bla bla",
            "done" : false
        },
        {
            "id": 2,
            "title": "ballesta",
            "description": "loren ipsum dolor no se que carajos seguia despues bla bla bla",
            "done" : true
        },
        {
            "id": 3,
            "title": "sable pistola",
            "description": "sacado de la franquisia de juegos mas alabado, a un nerd se le",
            "done" : false
        }
]

index.js

import React, { Component }from 'react'  
import ReactDOM from 'react-dom'
import './index.css';
// Components
import TaskForm from './components/TaskForm';

import tasks from './samples/tasks.json'
import Tasks from './components/tasks'

class App extends Component{ 
    state = {
        tasks : tasks
    }

    addTask = (title, description) => {
        const newTask = {
            id: this.state.tasks.length,
            title: title,
            description: description,
            done: false
        };
        this.setState(state => ({
            tasks : [...state.tasks, newTask]
        }));
        console.log(this.state)
    }

    deleteTask = id => {
        const newtasks = this.state.tasks.filter(task => task.id !== id);
        this.setState(state => ({
            tasks: newtasks
        }));
    }

    checkDone = id => {
        const newTasks = this.state.tasks.filter(task => {
            if (task.id === id) {
                console.log("funciona" + task.id)
//              task.done = !this.state.task.done
//              return tasks;
//          } else {
//              return task
            }
            console.log(task.id);
        });
        console.log(newTasks[0].id)
//      this.setState({tasks: newTasks});
}

render() {
    return (
        <div>
            <TaskForm addTask={this.addTask}/>
            <Tasks 
                tasks={this.state.tasks} 
                deleteTask={this.deleteTask} 
                checkDone={this.checkDone}
            />
        </div>
    )
}

tasks.js

import React, { Component } from 'react';
import Task from './Task';
import propTypes from 'prop-types';

export default class Tasks extends Component {
    render() {
        return (
            this.props.tasks.map(task => 
            <Task 
                task={task} 
                key={task.id} 
                deleteTask={this.props.deleteTask}
                checkDone={this.props.checkDone}
            />)
        );
    }
}
Tasks.propTypes = {
    tasks: propTypes.array.isRequired
}

task.js

import React,{ Component } from "react";
import propTypes from 'prop-types';

export default class Task extends Component{
     state = {
        done: this.props.task.done
    }
    styleCompleted() {
       return {
            fontSize: '20px',
            color: this.props.task.done ? 'grey' : 'black',
            textDecoration: this.props.task.done ? 'line-through' : 'none'
        }
    }
    render() {
        const {task} = this.props; // con esta linea extraemos el arreglo que nos stan devolviendo y lo guardamos en otro llamado task        
        return (
            <div style={this.styleCompleted()}>
                {task.title} -  
                {task.id} - 
                {task.description}  
                <input 
                    type="checkbox" 
                    onChange={this.props.checkDone(task.id)}
                />
                <button 
                    style={btnDelete} 
                    onClick={this.props.deleteTask.bind(this, task.id)}
                >
                  x
                </button>
            </div>     
        );
    }
}

Task.propTypes = {
    task: propTypes.object.isRequired
}


const btnDelete = {
    fontSize: '18px',
    background: 'red',
    color: '#fff',
    border: 'none',
    padding: '10px 15px',
    borderRadius: '50%',
    cursor: 'pointer'
}

感谢您的帮助

Answer 1

我将使用地图而不是过滤器。

过滤器用于从列表中删除元素。

如果你想修改一些我会做的元素：

function setAsDone(id) {
  const updatedList = list.map((task) => {
    return {
      ...task, // keep prevousValue
      done: id === task.id ? true : task.done
      // if current task has your id set as true
      // if not, let current value
    }
  })
  
  setState({
    tasks: updatedList
  })
}