Jestem dość nowy, aby zareagować na gołe ze mną. Tworzę aplikację TODY, która po prostu utrzymuje śledzenia zadań.

Problem:

Stan zwany [tasks, setTasks] = useState([]) robi aktualizację, gdy próbuję edytować zadanie w stanie tasks.

Na przykład powiedzmy tasks Zawiera ["make bed", "fold cloths"] i chciałem zaktualizować "złożone ubrania", aby "złożyć ubrania i odłożyć". Kiedy używam setTasks stan nie aktualizuje.

Modyfikacja stanu dzieje się w funkcji modifyTask.

Oto mój kod:

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;

Co myślę, że się dzieje

-> Moja teoria polega na tym, że stan tylko aktualizuje się, gdy liczba elementów w tablicy zmienia się. Jeśli tak jest, to jest elegancki sposób, aby to zrobić?

enter image description here

0
Nick 18 październik 2020, 00:26

2 odpowiedzi

Najlepsza odpowiedź

Wystarczy zmienić funkcję modyfikacji, aby użyć map zamiast filter, jak filter nie zmienia tablicy poza usuwającymi elementów. Mapa bierze zwrócone wartości i tworzy z nich nową tablicę.

  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));
  }
1
Zachary Haber 17 październik 2020, 21:45

Jeśli chcesz zastąpić element listy TODO, próbowałeś użyć splice.

Coś takiego:

[tasks, setTasks] = useState(["make bed", "fold cloths"])

const updateTask =(oldItem, newTask)=>{
const temp = tasks.splice(item, 1, newTask)
setTasks(temp)
}

W tym przypadku NewTask "fold clothes and put away"

-1
Fauricio Valencia 17 październik 2020, 21:49