Question

我是新来的反应，请与我裸露。我正在创建一个只跟踪任务的待办事项应用程序。

问题：

当我尝试在[tasks, setTasks] = useState([])状态内编辑任务时，称为tasks的状态会更新。

例如，假设tasks包含["make bed", "fold cloths"]，而我想将“折叠衣服”更新为“折叠衣服并收起来”。当我使用setTasks时，状态不会更新。

状态的修改发生在modifyTask函数中。

这是我的代码：

import React, { useEffect, useState } from "react";

// Imported Components below
import CurrentTasks from "./CurrentTasks";

function InputTask() {
  // Initial array for storing list items
  // Tracking state of input box
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState(
    JSON.parse(localStorage.getItem("tasks") || "[]")
  );

  function deleteTask(index) {
    function checkIndex(task, i) {
      if (i !== index) {
        return task;
      }
    }
    setTasks(prev => prev.filter(checkIndex));
  }

  function modifyTask(index) {
    let editedTask = prompt("Please edit task here..", tasks[index]);
    function editTask(task, i) {
      if (i === index) {
        task = editedTask;
      }
      console.log(task);
      return task;
    }
    setTasks(prev => prev.filter(editTask));
  }

  function handleAddTask() {
    setTasks(prev => prev.concat(task));
  }

  useEffect(() => {
    // Saves every time tasks state changes
    localStorage.setItem("tasks", JSON.stringify(tasks));
    console.log("Tasks: " + tasks);
    setTask("");
  }, [tasks]);

  return (
    <div className="container">
      <div className="input-group mt-4">
        <input
          type="text"
          value={task}
          onChange={e => setTask(e.target.value)}
          className="form-control form-control-lg"
          placeholder="Write task here..."
        />
        <div className="input-group-append">
          <button onClick={handleAddTask} className="btn btn-outline-secondary">
            Add
          </button>
        </div>
      </div>
      <CurrentTasks
        allTasks={tasks}
        deleteTask={deleteTask}
        modifyTask={modifyTask}
      />
    </div>
  );
}

export default InputTask;

我认为正在发生的事情

->我的理论是，状态仅在数组中的元素数更改时才更新。如果是这样，是否有一种优雅的方法？

Answer 1

您只需要更改自己的修改功能即可使用map而不是filter，因为filter不会在移除元素之外更改数组。 Map会使用返回的值，并根据它们创建一个新的数组。

  function modifyTask(index) {
    let editedTask = prompt("Please edit task here..", tasks[index]);
    function editTask(task, i) {
      if (i === index) {
        task = editedTask;
      }
      console.log(task);
      return task;
    }
    setTasks(prev => prev.map(editTask));
  }

修改元素时更新useState（）数组REACT

1 个答案: