React Axios Delete 每次都不渲染答案

【问题标题】：React Axios Delete Not rendering every timeReact Axios Delete 每次都不渲染
【发布时间】：2021-12-14 02:34:21
【问题描述】：

我在下面发布了三个文件的代码。出于某种原因，当我使用删除按钮时，React 应用程序会重新渲染，但只是有时。我正在使用 axios 并尝试将 onClick={deletionHandler} 更改为 onClick={() => deleteHandler} 和其他一些方法。我的问题是，我的 handleDeletion 函数有什么问题？为什么它有时只重新渲染，即使我设置了 Persons 状态变量，它应该重新渲染页面，对吗？我在我的 json-server db.json 文件中看到删除成功，只是重新渲染不起作用。当它不起作用并且我再次为已删除的数据库项单击删除按钮时，我得到以下结果：

删除 http://localhost:3001/persons/1 404（未找到）

谢谢

import Persons from './components/Persons'
import Filter from './components/Filter'

const App = ({jsonPersons}) => {
  const [persons, setPersons] = useState(jsonPersons)
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber ] = useState('')
  const [ filter, setFilter ] = useState('')

  **function handleDeletion(event){
    const idToDelete = event.target.value
    handlePerson
    .deletion(idToDelete)
    handlePerson
    .getAll().then(persons => {
      setPersons(persons)
    })
  }**

  function handleClick(event) {
    event.preventDefault()
    if(persons.some(person =>  person.name === newName)){
      alert(`${newName} i ..s already added to phonebook`)
      setNewName('')
      return
    }
    const personObject = {
      name:newName,
      number:newNumber
    }
    handlePerson
    .create(personObject)
    .then(returnedPerson => {
      setPersons(persons.concat(returnedPerson))
      setNewName('')
      setNewNumber('')
    })

  }
  const handleNameChange = (event) => {
    setNewName(event.target.value)
  }
  const handleNumberChange = (event)=> {
    setNewNumber(event.target.value)
  }
  const handleFilterChange = (event) => {
    setFilter(event.target.value)
  }

  return (
    <div>
      <h2>Phonebook</h2>
      <Filter filter={filter} onChange={handleFilterChange}/>
      <h2>add a new</h2>
      <PersonForm
      name={newName}
      number={newNumber}
      handleName={handleNameChange}
      handleNumber={handleNumberChange}
      handleClick={handleClick}
      />
      <h2>Numbers</h2>
      <Persons
      persons={persons}
      filter={filter}
      deletionHandler={handleDeletion}/>
    </div>
  )
}

export default App

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const Persons = ({persons,filter,deletionHandler}) => {
  const personsToShow = filter
  ? persons.filter(person => person.name.toLowerCase().includes(filter.toLowerCase()))
  : persons

  return(personsToShow.map(person => {
    return <p key={person.id}> {person.name} {person.number} <button value={person.id} onClick={deletionHandler}> delete </button></p>}
  ))
}
export default Persons

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

{
  "persons": [
    {
      "name": "Jsadwad",
      "number": "wdawd",
      "id": 12
    },
    {
      "name": "wadwd",
      "number": "dawda",
      "id": 13
    }
  ]
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： javascript reactjs axios react-hooks json-server

【解决方案1】：

您需要使用useEffect。

试试这个：

...

const App = ({ jsonPersons }) => {
  const [ persons, setPersons ] = useState([])   <---- empty array
  const [ newName, setNewName ] = useState('')
  const [ newNumber, setNewNumber ] = useState('')
  const [ filter, setFilter ] = useState('')

  useEffect(() => {                              <---- useEffect
   setPersons(jsonPersons)
  }, [jsonPersons])

  function handleDeletion(event){
    const idToDelete = event.target.value
    handlePerson
    .deletion(idToDelete)
    handlePerson
    .getAll().then(persons => {
      setPersons(persons)
    })
  }

...

当jsonPersons 发生变化时，会开始渲染，persons 的状态也会发生变化

【讨论】：