删除元素后如何重新呈现列表

Question

我正在尝试编写一个 delete 方法以从列表中删除一个元素，首先我无法将它写在 setState 函数中，所以我将它作为直接函数调用，如何才能我设法在直接函数之后发出重新渲染信号，或者设法将函数放在 setState 方法中以进行自动重新渲染？


class TASKMANAGER extends Component {
    constructor(props){
        super(props);
        this.state= {
            name: "",
            description:"",
            priority: "urgent",
            tasklist: [],
        }

        this.handleTitleChange= this.handleTitleChange.bind(this);
        //this.handleDescriptionChange= this.handleDescriptionChange.bind(this);
        //this.handlePriorityChange= this.handleDescriptionChange.bind(this);
        this.handleClick= this.handleClick.bind(this);
        

    }

     

    handleTitleChange = event => {
        this.setState( {
            name: event.target.value
        })
        };

    handleDescriptionChange = event => {
        this.setState({
            description: event.target.value
        })
        };

    handlePriorityChange = event => {
        this.setState({
            priority: event.target.value
        })
        };
        
    
    handleClick = event => { 
        this.setState((state) => {
        const tasklist = [
          ...state.tasklist,
          [
            state.name,
            state.description,
            state.priority
          ]
        ];
        return {
          tasklist
        };
       });
        
            
            //console.log(this.state.tasklist);
        };

        handleDelete = index => {
            this.setState(() => {
                this.state.tasklist.splice(index, 1)
            });

            console.log(this.state.tasklist)
        }    THIS ONE IS THE FUNCTION I CANNOT SET TO WORK TO TRIGGER THE AUTO RE-RENDER


       

    

    render() {
        
        const task_item = this.state.tasklist.map((arr, index) => (
                <li 
                key= {index}
                className= 'task'>
                Task: {arr[0]} <br />
                Description: {arr[1]} <br />
                Priority: {arr[2]} <br />
                <div className='delete-button' onClick={
                    /*() => {this.state.tasklist.splice(index, 1);}*/ THIS ONE IS THE DIRECT FUNCTION THAT WORKS, BUT DOESN'T TRIGGER THE RE-RENDER, IT SHOWS WHEN I TYPE AGAIN ON THE INPUTS 

                    this.handleDelete                 

            }>delete</div>
                </li>
                ))

        return (
            <div>
             <div className= 'task-form'>  
            <form>
                <div>
                    <label>Name your task!</label>
                    <input type= 'text' id='task-title' value={this.state.name} onChange={this.handleTitleChange} />
                </div>
                <div>
                    <label>Description?</label>
                    <textarea id='description' value={this.state.description} onChange={this.handleDescriptionChange}/>
                </div>
                <div>
                    <label>Priority?</label>
                    <select value={this.state.priority} onChange={this.handlePriorityChange}>
                        <option value='urgent'>Urgent</option>
                        <option value='regular'>Regular</option>
                        <option value='Can wait'>Can wait</option>
                    </select>    
                </div>
            </form> 
            <button onClick={this.handleClick}>PRESS</button>
            </div>
            <div className='list-items'>
                <ul className='list-render'>
                    {task_item}
                </ul>
            </div>
            </div>   
            )
    }}


    export default TASKMANAGER

Answer 1

您不应对当前状态进行任何更改，而应从现有状态构建新状态，并在此过程中生成经过过滤的新数组

handleDelete = index => {

    this.setState((state) => ({
        ...state,
        tasklist: state.taskList.filter((_,i) => i != index)
    }));
}

当您将 taskList 映射到下面的 JSX 时，您将需要避免将项目的索引用作 key，因为优化反应使得使用 key 值将在破碎的假设下运作。使用保持不变且每个项目唯一的 key 值。可能是它的名称，或者创建时附加的标识符。

Answer 2

不需要分配列表。只是拼接它。使用类似这样的东西来改变状态：

delete={()=>{this.setState({phase:1-this.state.phase});
                  this.state.list.splice(index,1)}}

删除元素后如何重新呈现列表

How to re-render a list after deleting an element

javascript

event-handling

setstate

reactjs

react-lifecycle