Блог

У меня есть UserLists компонент, в котором пользователь вводит ввод и добавляет значение в нижнюю часть экрана.

Входное значение добавляется в whitelist состояние. Затем состояние отображается и создает дополнительные входные данные, где пользователь может решить удалить указанный ввод или отредактировать его.

У меня возникли проблемы с удалением входных данных. Я думал, что смогу удалить каждый ввод по отдельности, объединив состояние, но моя реализация deleteItem удаляет несколько входных данных при нажатии на любой из них.

Я также не могу редактировать какие-либо входные данные, потому что они value задаются моей addItem функцией.

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

export const UserLists = () => {
  const [whitelist, setWhiteList] = useState([]);
  const addItem = () => {
    let newValue = document.getElementById("whiteList").value;
    setWhiteList([...whitelist, newValue]);
  };
  useEffect(() => {
    console.log(whitelist, "item changed");
  }, [whitelist]);

  const deleteItem = (index) => {
    let test = whitelist.splice(index, 1);
    setWhiteList(test);
    console.log("index:", index);
  };
  const editItem = () => {};
  return (
    <div>
      <h2>WhiteList</h2>
      <input id="whiteList" type="text" />
      <button onClick={addItem}>Add</button>
      {whitelist.map((item, index) => {
        return (
          <div>
            <input type="text" value={item} onChange={editItem} />
            <button onClick={() => deleteItem(index)}>Delete</button>
            <p>{index}</p>
          </div>
        );
      })}
    </div>
  );
};
 

Как я могу пересмотреть свой код для успешного индивидуального удаления и редактирования входных данных?
Мой codesandbox

Вам необходимо изменить свои функции editItem и DeleteItem, чтобы функции редактирования и удаления работали должным образом. Вот ссылка на изолированную среду кода для решения вашей проблемы:

https://codesandbox.io/s/whitelist-forked-y51w8

Не делайте:

 let test = whitelist.slice(index, 1);
setWhiteList(test);
 

Сделайте это вместо:

 whitelist.splice(index, 1);
setWhiteList([...whitelist]);