Не удается обновить состояние после удаления элемента из бэкэнда с помощью Axios и React - PullRequest
Новая
       65

Не удается обновить состояние после удаления элемента из бэкэнда с помощью Axios и React

0 голосов
/ 21 октября 2019

Работа над проектом телефонной книги, где посетитель может ввести имя и номер телефона. Использование json-сервера для бэкэнда и React для внешнего интерфейса.

Полный код здесь Код телефонной книги Github

Функциональность добавления номера работает нормально, но яУ меня проблемы с кнопкой, которая позволяет посетителю удалить номер. Когда пользователь нажимает кнопку «удалить», он успешно удаляется из бэкэнда (файл db.json). Однако на веб-интерфейсе удаленный номер не удаляется, и я вижу, что состояние не меняется.

Любая помощь приветствуется.

Вот моя функция удаления для удаления номера из бэкэнда 

const deletePerson = id => {
  const request = axios.delete(baseUrl + `/` + id);
  return request.then(response => response.data);
};

, и эта функция вызывается из метода onClick кнопки 

 const deleteNum = event => {
    let personID = event.target.value;
    if (window.confirm("Do you really want to delete?")) {
      personService
        .deletePerson(personID)
        .then(() => {
          setPersons(persons.filter(item => item.id !== personID));
        })
        .catch(error => {
          console.log("Error", error);
        });
    }
  };

и остаток соответствующего кода для предоставления этого контекста 

const App = () => {
  const [persons, setPersons] = useState([]);
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");
  const [filter, setFiltered] = useState("");

  useEffect(() => {
    personService.getAll().then(initialPersons => setPersons(initialPersons));
  }, []);

  console.log("Persons", persons);

  const peopleToShow =
    filter === ""
      ? persons
      : persons.filter(person =>
          person.name.toLowerCase().includes(filter.toLowerCase())
        );

  const rows = () =>
    peopleToShow.map(p => (
      <p key={p.name}>
        {p.name} {p.number}{" "}
        <span>
          <button value={p.id} onClick={deleteNum}>
            delete
          </button>
        </span>
      </p>
    ));

1 Ответ

1 голос
/ 21 октября 2019

item.id хранится в виде числа, а personID - в виде строки. Поэтому попробуйте изменить! == на! =.

...