删除元素后如何重新渲染列表

如何解决删除元素后如何重新渲染列表

我正在尝试编写一个删除方法以从列表中删除一个元素，首先我无法将其写入 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

解决方法

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

handleDelete = index => {

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

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