Reactjs 如何在任务列表中动态操作道具？

我还没有反应过来。我坚持用onClick按钮从屏幕上移除卡片。从这一点上，我可以得到this.props.data，如果我使用console.log（this.props.data），它会返回我

(2) [Object, Object]
0: Object
1: Object

所以我想知道如何从

这个.props.data

中删除对象。当我以这种方式使用带有索引（实际上是对象的id）的

this.props.data.splice（index，1）

方法时，它不能正常工作，但项目会从屏幕上消失。此函数从头到尾按顺序删除数组中的所有内容。请向我解释如何才能为这一成就获得最佳解决方案

以下是代码：

import React from "react";
import TaskList from './TaskList';
import update from 'immutability-helper';
import './../stylesheets/main.scss';

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        localStorage.getItem("tasks") ? (this.state.tasks = JSON.parse(localStorage.tasks)) : (this.state.tasks = []);
    }

    addTask(id) {
        const newTasks = this.state.tasks;
        let task = {type: 'do_it', id: '0', description: '', priority: '', time: new Date().toLocaleString()};
        let desc = document.getElementById("description").value;
        let cardPriority = document.getElementById("priority-selector").value;

        task.id = newTasks.length + 1;
        task.description = desc;
        task.priority = cardPriority;
        newTasks.push(task);
        localStorage.setItem('tasks', JSON.stringify(newTasks));
        this.setState({
            tasks: newTasks
        })
    }

    handleDrop(id, toType) {
        const tasks = this.state.tasks;
        const taskIndex = tasks.findIndex((task) => {
            return task.id == id;
        });
        const updatedTask = update(tasks[taskIndex], {type: {$set: toType}});
        const newTasks = update(tasks, {
            $splice: [[taskIndex, 1, updatedTask]]
        });
        localStorage.setItem('tasks', JSON.stringify(newTasks));
        this.setState({tasks: newTasks});
    }

    render() {
        return (
            <div className="page-home">
                <div className="input">
                    <div className="inner">
                        <h1>Kanban Board</h1>
                        <input name="description" type="text" id="description"/>
                        <select name="priority" id="priority-selector">
                            <option value="">Priority:</option>
                            <option value="1">1: High</option>
                            <option value="2">2: Medium</option>
                            <option value="3">3: Low</option>
                        </select> <br/>
                        <button type="submit" className="submit" onClick={this.addTask.bind(this)}>Add task</button>
                    </div>
                </div>
                <div className="container">
                    <div className="column">
                        <h2>Do it</h2>
                        <TaskList
                            data={this.state.tasks}
                            type={'do_it'}
                        />
                    </div>
                    <div className="column">
                        <h2>In Progress</h2>
                        <TaskList
                            data={this.state.tasks}
                            type={'in_progress'}
                            allowedTypes={['do_it']}
                            handleDrop={this.handleDrop.bind(this)}
                        />
                    </div>
                    <div className="column">
                        <h2>Done</h2>
                        <TaskList
                            data={this.state.tasks}
                            type={'done'}
                            allowedTypes={['in_progress']}
                            handleDrop={this.handleDrop.bind(this)}
                        />
                    </div>
                    <div className="column">
                        <h2>Aborted</h2>
                        <TaskList
                            data={this.state.tasks}
                            type={'aborted'}
                            allowedTypes={['do_it', 'in_progress']}
                            handleDrop={this.handleDrop.bind(this)}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

从“React”导入React；
从“/TaskList”导入任务列表；
从“不变性助手”导入更新；
导入“/../stylesheets/main.scss”；
导出默认类Home扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
localStorage.getItem（“任务”）？（this.state.tasks=JSON.parse（localStorage.tasks））：（this.state.tasks=[]）；
}
添加任务（id）{
const newTasks=this.state.tasks；
let task={type:'do_it'，id:'0'，description:''，priority:''，time:new Date（）.toLocaleString（）}；
让desc=document.getElementById（“description”）.value；
让cardPriority=document.getElementById（“优先级选择器”）.value；
task.id=newtask.length+1；
task.description=desc；
task.priority=cardPriority；
newTasks.push（任务）；
setItem（'tasks'，JSON.stringify（newTasks））；
这是我的国家({
任务：新任务
})
}
handleDrop（id，toType）{
const tasks=this.state.tasks；
const taskIndex=tasks.findIndex（（任务）=>{
return task.id==id；
});
const updatetask=update（任务[taskIndex]，{type:{$set:toType}}）；
const newTasks=更新（任务{
$splice:[[taskIndex，1，updatedTask]]
});
setItem（'tasks'，JSON.stringify（newTasks））；
this.setState（{tasks:newTasks}）；
}
render（）{
返回(
用看板图
优先：
1:高
2:中等
3：低


添加任务
做吧
进行中
多恩
流产
);
}
}

下面是任务列表类：

import React from "react";
import { Draggable, Droppable } from 'react-drag-and-drop'
import update from 'immutability-helper';

export default class TaskList extends React.Component {

    static getElementId(e) {
        let id = null;
        for (let key in e) {
            if (e[key] !== '') {
                id = e[key];
            }
        }
        return id;
    }

    static sortByPriority(a, b) {
        return b.priority - a.priority;
    }

    onDrop(e) {
        if (!e) return;
        const id = TaskList.getElementId(e);
        this.props.handleDrop(id, this.props.type)
    }

    orderTasks() {
        const tasks = this.props.data.filter((el) => {
            return el.type === this.props.type;
        });
        // tasks.sort(TaskList.sortByPriority);

        tasks.sort(function (a, b) {
            return new Date(a.date) - new Date(b.date);
        });

        return tasks;
    }

    handleSubmit(e) {
        e.preventDefault();
    }

    editTask(e) {

        //var desc = e.target.value;
        //
        //this.setState({
        //    tasks: {description: desc}
        //})

    }

    deleteTask(index) {

        var state = this.props.data;

        console.log(index);

        state.splice(index, 1);

        localStorage.setItem('tasks', JSON.stringify(state));

        this.setState({
            tasks: state
        })
    }

    render() {
        const tasks = this.orderTasks();

        return (
            <Droppable
                className="list" types={this.props.allowedTypes}
                onDrop={this.onDrop.bind(this)}
            >
                <ul>
                    {tasks.map((task) => {

                        return (
                            <Draggable
                                type={this.props.type}
                                key={task.id}
                                data={task.id}
                            >
                                <li>
                                    <div className="card">

                                        <b>Task description:</b><br/>

                                        {task.type === 'do_it' ?

                                            <form>
                                                <input
                                                    type="text"
                                                    defaultValue={task.description}
                                                    onChange={this.editTask.bind(this)}
                                                />
                                                <input
                                                    type="button"
                                                    onSubmit={this.handleSubmit.bind(this)}
                                                    value="Edit"
                                                />
                                            </form>

                                            : <p>{task.description}</p>}

                                        <p><b>Time: </b>{task.time}</p>

                                        <div className="priority"><b>Priority:</b> {task.priority}</div>

                                        {task.type === 'aborted' ? <button className="close"
                                                                           onClick={this.deleteTask.bind(this, task.id)}>&times;</button> : null}
                                        {task.type === 'done' ? <button className="close"
                                                                        onClick={this.deleteTask.bind(this, task.id)}>&times;</button> : null}
                                    </div>
                                </li>
                            </Draggable>
                        )
                    })}
                </ul>
            </Droppable>
        );
    }
}

从“React”导入React；
从“react drag and drop”导入{Dragable，Dropable}
从“不变性助手”导入更新；
导出默认类任务列表扩展React.Component{
静态getElementId（e）{
设id=null；
for（输入e）{
如果（e[键]！=''）{
id=e[key]；
}
}
返回id；
}
静态排序优先级（a，b）{
返回b.priority-a.priority；
}
昂德罗普（e）{
如果（！e）返回；
const id=TaskList.getElementId（e）；
this.props.handleDrop（id，this.props.type）
}
orderTasks（）{
const tasks=this.props.data.filter（（el）=>{
返回el.type==this.props.type；
});
//tasks.sort（TaskList.sortByPriority）；
任务.排序（函数（a，b）{
返回新日期（a日期）-新日期（b日期）；
});
返回任务；
}
handleSubmit（e）{
e、 预防默认值（）；
}
编辑任务（e）{
//var desc=e.target.value；
//
//这是我的国家({
//任务：{description:desc}
//})
}
删除任务（索引）{
var state=this.props.data；
控制台日志（索引）；
状态。拼接（索引，1）；
setItem（'tasks'，JSON.stringify（state））；
这是我的国家({
任务：国家
})
}
render（）{
const tasks=this.orderTasks（）；
返回(

{tasks.map（（任务）=>{
返回(

任务描述：

{task.type==='do_it'？
：{task.description}
}
时间：{task.Time}

优先级：{task.Priority}
{task.type=='aborted'？×；：null}
{task.type=='done'？×；：null}

)
})}

);
}
}

正如通过将任务添加到您的状态来添加任务一样，您必须将您的状态更新为一组新的任务，这些任务不包括您试图删除的任务，然后React将从DOM中删除已删除的任务。在deleteTask函数中：

this.setState( state => ({ tasks : state.tasks.filter(x => x.id !== id ) }))

请注意：通常，您希望避免在添加任务时直接改变this.state

this.setState( state => ({ tasks: state.tasks.concat(task) }) )

this.setState( state => ({ tasks: [...state.tasks, task)] }))

deleteTask: function(e) {
  var index = this.props.items.indexOf(e.target.value);
  this.props.items.splice(index, 1);
  this.forceUpdate();
}

deleteTask(id) {

        const state = this.props.data;

        for (var i = 0; i < state.length; i++) {

            if (state[i].id === id) {

                let current = state[i];

                state.splice(state.indexOf(current), 1);
            }
        }

        localStorage.setItem('tasks', JSON.stringify(state));

        this.setState({
            tasks: state
        })
    }