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

Question

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

标签： javascriptreactjsevent-handlingsetstatereact-lifecycle

Answer 1

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

handleDelete = index => {

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

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