Question

我已经使用react钩子实现了todolist应用程序。我在这里有两个州。一种是保存文本字段值的名称状态。列表状态是另一个，它将待办事项列表的内容作为数组保存。

现在，当我添加项目时，我会更新列表状态并重新渲染页面。但是，当我删除一个选定的项目时，我会更新List数组，并且它会在我检查日志时更新，并且会再次重新呈现..但是我看不到UI上的更改。因此，简而言之，删除项目处理程序在我的代码中不起作用。

import React,{useState} from "react"
import {render} from "react-dom"

const  App = ()=> {

    const [taskList, setTaskList] = useState([])
    const [taskField, setTaskField] = useState("");

    function handleTaskFieldChange(e){
        setTaskField(e.target.value);
    }

    function handleAddClick(){
        if(taskField){
             setTaskList([...taskList, taskField])
             setTaskField("")
        }
    }

    function removeButtonHandler(e){
        var i = e.target.id;
        var list = taskList;
        list.splice(i,1)
        console.log(list)
        setTaskList(list)
    }

    return(
        <div>
            <div>
               <b> TO DO LIST</b>
            </div>
            <div 
            className= "inputAdd">
                <input
                value={taskField}
                placeholder="enter new task "
                onChange = {handleTaskFieldChange} >
                </input>
                <button                
                onClick = {handleAddClick}
                >
                    Add +
                </button>
            </div>
            {
            taskList.map((element,index) =>  {
                console.log("repaint list", taskList)
                return(
                <div
                className="listItem"
                key={index}>
                <span>{index + 1}. {element}</span>
                <button
                key={index}
                id={index}
                onClick={removeButtonHandler}
                >
                    remove
                </button>
            </div>)

                })
            }
        </div>
    )
}

render(<App/>, document.getElementById("root"))

你们能告诉我我的删除按钮hanlder有什么问题吗？为什么在删除项目后不显示更新列表？？

Answer 1

请尝试避免使用.splice()直接改变状态对象。为了使React正确呈现更新后的状态，您需要传递一个全新的状态对象。

在触发removeButtonHandler时，我们可以使用.filter()创建新的项目列表，不包括您选择要删除的项目。然后将该新列表传递到setTaskList()

工作沙箱：https://codesandbox.io/s/dawn-frog-gv79h

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [taskList, setTaskList] = useState([]);
  const [taskField, setTaskField] = useState("");

  function handleTaskFieldChange(e) {
    setTaskField(e.target.value);
  }

  function handleAddClick() {
    if (taskField) {
      setTaskList([...taskList, taskField]);
      setTaskField("");
    }
  }

  function removeButtonHandler(e) {
    var i = e.target.id;
    const updatedTasks = taskList.filter(
      (field, fieldIndex) => fieldIndex != i
    );
    setTaskList(updatedTasks);
  }

  return (
    <div>
      <div>
        <b> TO DO LIST</b>
      </div>
      <div className="inputAdd">
        <input
          value={taskField}
          placeholder="enter new task "
          onChange={handleTaskFieldChange}
        />
        <button onClick={handleAddClick}>Add +</button>
      </div>
      {taskList.map((element, index) => {
        return (
          <div className="listItem" key={index}>
            <span>
              {index + 1}. {element}
            </span>
            <button key={index} id={index} onClick={removeButtonHandler}>
              remove
            </button>
          </div>
        );
      })}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

您可以使用spreed运算符来迭代列表。您在将taskList分配给list变量时出错。请使用以下代码

x2

状态更新时，react页面不会重新呈现

2 个答案: