如何在渲染組件之前更新狀態？

Question

我有這個應用程序將“人”添加到“電話簿”中，如果此人已存在，則用戶可以更新此人的電話。 但我想知道如何處理此人何時已被刪除的問題（我打開兩個標簽並在一個標簽中刪除一部手機，然后嘗試在第二個標簽中“更新”它）

我有一個persons.js負責處理所有的HTTP請求（我使用愛可信）和PersonNotification.js它告訴我們，如果手機被“添加”或“更新”或“不存在了”用戶和所有主要的功能在App.js

這是我的代碼

人物.js

import axios from "axios";
const URL = "http://localhost:3001/persons";

const getPersons = () => {
  return axios.get(URL).then((res) => res.data);
};

const addPerson = (person) => axios.post(URL, person);
// this is where i have the probelm (i think)
const updatePerson = (person, number, setErrMsg) => {
  axios
    .put(`${URL}/${person[0].id}`, {
      name: person[0].name,
      number,
    })
//i wanted the change the state of the App.js from this line after there is an error
    .catch((err) => setErrMsg("err"));
};

const deletePerson = (person) => axios.delete(`${URL}/${person.id}`);

export { getPersons, addPerson, deletePerson, updatePerson };

應用程序.js

import React, { useState, useEffect } from "react";
import {
  getPersons,
  addPerson,
  deletePerson,
  updatePerson,
} from "./services/persons";
import Filter from "./components/Filter";
import Form from "./components/Form";
import Phonebook from "./components/Phonebook";
import PersonNotification from "./components/PersonNotification";
const App = () => {
  const [persons, setPersons] = useState([]);
  const [newName, setNewName] = useState("");
  const [newNumber, setNewNumber] = useState("");
  const [query, setQuery] = useState("");
  const [searchValue, setSearchValue] = useState([]);
  const [notification, setNotification] = useState("");
  const [errMsg, setErrMsg] = useState("");

  // fetching the data from json-server (i,e: db.json)
  useEffect(() => {
    getPersons().then((res) => setPersons(res));
  }, []);
  // function that fires after the submit
  const personsAdder = (e) => {
    e.preventDefault();
    const personsObject = { name: newName, number: newNumber };

    //checking if the name exists
    const nameChecker = persons.filter(
      (person) => person.name === personsObject.name
    );
    console.log(errMsg);
    if (nameChecker.length > 0) {
      const X = window.confirm(
        `${personsObject.name} already exists do you want to update the number`
      );

      if (X === true) {
        // updating the number if the user confirmed
        updatePerson(nameChecker, newNumber, setErrMsg);
        const personsCopy = persons;
        const index = personsCopy.indexOf(nameChecker[0]);
        personsCopy[index] = {
          id: personsCopy[index].id,
          name: personsCopy[index].name,
          number: newNumber,
        };

        setPersons([...personsCopy]);
        setNewName("");
        setNewNumber("");
        //the function the shows the notification for 5 seconds after the content was updated
        const notificationSetter = () => {
          let X = "";
          if (errMsg.length > 0) {
            X = `you can't update${nameChecker[0].name} because it doesn't exist anymore`;
          } else {
            X = `${nameChecker[0].name} was updated`;
          }
          setNotification(X);

          setTimeout(() => {
            setNotification("");
            setErrMsg("");
          }, 5000);
        };
        notificationSetter();
      }
    } else {
      //adding a new user if the name was not already in the phonebook
      setPersons(persons.concat(personsObject));
      addPerson(personsObject);
      setNewName("");
      setNewNumber("");
      //the function the shows the notification for 5 seconds after the content was added
      const notificationSetter = () => {
        setNotification(`${personsObject.name} was added`);
        setTimeout(() => {
          setNotification("");
        }, 5000);
      };
      notificationSetter();
    }
  };

//... there is still more down here; i don't know if i should copy paste all my code

人員通知.js

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

const PersonNotification = ({ notification, errMsg }) => {
  if (errMsg.length > 0) {
    return <h1 className="err">{notification}</h1>;
  }
  if (notification.length === 0) {
    return <></>;
  } else {
    return <h1 className="notification">{notification}</h1>;
  }
};

export default PersonNotification;

PS：這是這個應用程序的github文件夾。 這是 fullstackopen.com 的一個練習，所以我在這里發布我的問題之前有點猶豫，但我在這個問題上花了 4 個多小時，我只想弄清楚如何更早地更新“errMsg”的狀態，我想之后一切都會變得容易

Answer 1

這部分應該可以幫助你走得更遠。

人物.js

const updatePerson = (person, number) => {
  const request = axios
    .put(`${URL}/${person[0].id}`, {
      name: person[0].name,
      number,
    });
  return request.then(response => response.data)
};

應用程序.js

if (X === true) {
  const notificationSetter = (X) => {
    setNotification(X);

    setTimeout(() => {
      setNotification("");
      setErrMsg("");
    }, 5000);
  };
  // updating the number if the user confirmed
  updatePerson(nameChecker, newNumber, setErrMsg)
  .then(data => {
    notificationSetter(`${nameChecker[0].name} was updated`);
    console.log('persons :>> ', persons);
    console.log('data :>> ', data);
    
    const personsCopy = persons;
    const index = personsCopy.indexOf(nameChecker[0]);
    personsCopy[index] = {
      id: personsCopy[index].id,
      name: personsCopy[index].name,
      number: newNumber,
    };
    
    setPersons([...personsCopy]);
  })
  .catch(error => {
    notificationSetter(`you can't update ${nameChecker[0].name} because it doesn't exist anymore`);
    getPersons().then((res) => setPersons(res));
  })
  setNewName("");
  setNewNumber("");
}