React Axios Delete 每次都不渲染

Posted 2023-03-27

【中文标题】React Axios Delete 每次都不渲染

【英文标题】：React Axios Delete Not rendering every time

【发布时间】：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>

【参考方案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 的状态也会发生变化