我正在尝试使用 React useState 挂钩更新 state？ 创建读取和删除部分已完成，但我无法更新

Question

I am making a To Do App using useState react hook. I have complete with Create Read and Delete parts but I have not been able to update the state. Can somebody please help me. I have complete the same with Class component.

/****************************** MY app.js file ********************************************/

import React, { useState } from "react";
import "./App.css";
import ToDoList from "./Components/ToDoList";

function App() {
  const [change, handleChange] = useState("");
  const [items, addItem] = useState([]);

  let handleSubmit = (e) => {
    e.preventDefault();
    // console.log(change)
    if (change !== "") {
      addItem([...items, { text: change, key: Date.now() }]);
      handleChange("");
    }
  };

  let removeTask = (key) => {
    let item = items.filter((ele) => {
      return ele.key !== key;
    });
    console.log(item);
    addItem([...item]);
  };

  let updateToDo = (value, key) => { // <<<<<<< I need to make changes in this piece of code.
    let allItem = items.map((e) => {
      if (e.key === key) {
        e.text = value;
      }
      console.log(...allItem);
      // addItem([...items, { allItem }]);
    });
  };

  return (
    <div className="toDoContainer">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          onChange={(e) => handleChange(e.target.value)}
          value={change}
          placeholder="Add Item"
        />
        <button>Add Item</button>
      </form>
      <ToDoList items={items} removeTask={removeTask} updateToDo={updateToDo} />
    </div>
  );
}

export default App;


/*************************************** My ToDoList.js *************************************/

import React from "react";
import "./ToDoList.css";

function ToDoList({ items, removeTask, updateToDo }) {
  let toDoItems = items.map((item) => {
    return (
      <div className="toDoItems" key={item.key}>
        <p>
          <input
            type="text"
            id = {item.key}
            value={item.text}
            onChange={(e) => updateToDo(e.target.value, item.key)}
          />

          <span onClick={() => removeTask(item.key)}>&#10008;</span>
        </p>
      </div>
    );
  });
  return <div>{toDoItems}</div>;
}

export default ToDoList;

Answer 1

You can map items into new array and when the item key matches the key parameter update the text property.

let updateToDo = (value, key) => {
  const allItem = items.map(item => {
    const newItem = {...item};
    if (item.key === key) {
      newItem.text = value;
    }
    return newItem;
  });
  console.log(...allItem);
  addItem(allItem);
};

Answer 2

buddy!

First fo all, I suggest you can read document about React Hooks , it have clear explain how to update State when you using useState , I split several parts below:

On here const [items, addItem] = useState([]); , The Hooks useState will return a array, the first item is your value of state, at this time is a empty array [] , the second item is a method which can update value of state.

Next, in your update method updateToDo , you used map to update original value of state and create the new value of state. so why didn't you call addItem to update your value of state?(Maybe you tried, but I have no idea for why you comment out that line?)

You just need to pass new value of state for addItem , and I suggest you can rename it to setItem instead of addItem .

You can following:

let updateToDo = (value, key) => { // <<<<<<< I need to make changes in this piece of code.
  let allItem = items.map((e) => {
    if (e.key === key) {
      e.text = value;
    }
    addItem(allItem);
  });
};