在 axios PUT 请求之后更新 React state 而无需重新加载页面

Question

On my current application, if a user tries to enter an existing name that has a different number, it will prompt the user if they want to update that entry with the new number. If yes, the entry is updated using an axios PUT request. My issue is that I can only get it to change on the front end by reloading the page (it updates successfully on db.json ) instead of it updating immediately after the user confirms. On my useEffect method I tried adding [persons] as the second argument and it seemed to work, but found out that it loops the GET requests infinitely. I have a similar function for when deleting an entry so I'm sure it must be something that has to be added to setPersons

Update methods

const addEntry = (event) => {
    event.preventDefault();
    const newPersonEntry = {
      name: newName,
      number: newNumber,
    }
    const all_names = persons.map(person => person.name.toUpperCase())
    const all_numbers = persons.map(person => person.number)
    const updatedPerson = persons.find(p => p.name.toUpperCase() === newName.toUpperCase())

    const newPerson = { ...updatedPerson, number: newNumber };
    if (newName === '') {
      alert('Name entry cannot be blank')
      return
    }
    if (newNumber === '') {
      alert('Number entry cannot be blank')
      return
    }
    if (all_numbers.includes(newNumber)) {
      alert('That number already exists')
      return
    }
    if (newNumber.length < 14) {
      alert('Enter a valid number')
      return
    }
    if (all_names.includes(newName.toUpperCase())) {
      if (window.confirm(`${newName} already exists, replace number with the new one?`)) {
        console.log(`${newName}'s number updated`)
        personService
          .update(updatedPerson.id, newPerson)
          .then(res => {
            setPersons() //something here
          })
        return
      }
      return
    }

    personService
      .create(newPersonEntry)
      .then(person => {
        setPersons(persons.concat(person))
        setNewName('')
        setNewNumber('')
      })
  }

//PUT exported as personService
const update = (id, newObject) => {
    const request = axios.put(`${baseURL}/${id}`,newObject)
    return request.then(response => response.data)
}

Other code

const App = () => {
  const [persons, setPersons] = useState([])
  
  useEffect(() => {
    personService
      .getAll()
      .then(initialPersons => {
        setPersons(initialPersons)
      })
  }, [])
...

//Display method
const filteredNames = persons.filter(person => person.name.toLowerCase().includes(filter.toLowerCase()))

  const row_names = () => {
    return (
      filteredNames.map(person =>
        <p key={person.id}>{person.name} {person.number} <button onClick={() => handleDelete(person)}>delete</button></p>));
  }

...
//Render 
return (
    <div>
      <h2>Phonebook</h2>
      <h2>Search</h2>
      <SearchFilter value={filter} onChange={handleFilterChange} />
      <h2>Add Entry</h2>
      <Form onSubmit={addEntry}
        name={{ value: newName, onChange: handleNameChange }}
        number={{ value: newNumber, onChange: handleNumberChange }}
      />
      <h2>Numbers</h2>
      <DisplayPersons persons={row_names()} />
    </div>
  )
}

Answer 1

The solution here is a little bit tricky but doable. You need to split your logic into two parts like this:

const [dataChanged , setDataChanged] = useState(false)

useEffect(()=>{
   // Rest of your logic here
} , [dataChanged])

useEffect(()=>{
   // Your logic will run only one time
   // on Success we change the dataChanged state so the other useEffect will 
   // run basically you can run the rest of your logic in the other 
   // useEffect so the infinite loop won't happen
   // setDataChanged( (prev) => !prev )
} , [])

Answer 2

Was able to use map method that worked

personService
   .update(updatedPerson.id, newPerson)
   .then(res => {
      setPersons(persons.map(p => p.id !== updatedPerson.id ? p : res))
})