#javascript #reactjs #axios #react-hooks #json-server
Вопрос:
У меня есть три файла кода, размещенных ниже. По какой-то причине, когда я использую кнопку удаления, приложение React будет отображаться повторно, но только иногда. Я использую axios и попытался изменить onClick={deletionHandler} на onClick={() =gt; deletionHandler} и несколько других методов. Мой вопрос в том, что не так с моей функцией handleDeletion? Почему он только иногда перерисовывается, хотя я установил переменную состояния Persons, которая должна перерисовывать страницу, верно? Я вижу в своем файле db.json json-сервера, что удаление прошло успешно, просто повторный рендеринг не работает. Когда это не работает, и я снова нажимаю кнопку удалить для элемента базы данных, который был удален, я получаю следующий результат:
УДАЛИТЬ http://localhost:3001/persons/1 404 (Не найдено)
Спасибо
import Persons from './components/Persons' import Filter from './components/Filter' const App = ({jsonPersons}) =gt; { 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 =gt; { setPersons(persons) }) }** function handleClick(event) { event.preventDefault() if(persons.some(person =gt; person.name === newName)){ alert(`${newName} i ..s already added to phonebook`) setNewName('') return } const personObject = { name:newName, number:newNumber } handlePerson .create(personObject) .then(returnedPerson =gt; { setPersons(persons.concat(returnedPerson)) setNewName('') setNewNumber('') }) } const handleNameChange = (event) =gt; { setNewName(event.target.value) } const handleNumberChange = (event)=gt; { setNewNumber(event.target.value) } const handleFilterChange = (event) =gt; { setFilter(event.target.value) } return ( lt;divgt; lt;h2gt;Phonebooklt;/h2gt; lt;Filter filter={filter} onChange={handleFilterChange}/gt; lt;h2gt;add a newlt;/h2gt; lt;PersonForm name={newName} number={newNumber} handleName={handleNameChange} handleNumber={handleNumberChange} handleClick={handleClick} /gt; lt;h2gt;Numberslt;/h2gt; lt;Persons persons={persons} filter={filter} deletionHandler={handleDeletion}/gt; lt;/divgt; ) } export default App lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"gt;lt;/scriptgt; const Persons = ({persons,filter,deletionHandler}) =gt; { const personsToShow = filter ? persons.filter(person =gt; person.name.toLowerCase().includes(filter.toLowerCase())) : persons return(personsToShow.map(person =gt; { return lt;p key={person.id}gt; {person.name} {person.number} lt;button value={person.id} onClick={deletionHandler}gt; delete lt;/buttongt;lt;/pgt;} )) } export default Persons lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"gt;lt;/scriptgt; { "persons": [ { "name": "Jsadwad", "number": "wdawd", "id": 12 }, { "name": "wadwd", "number": "dawda", "id": 13 } ] } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"gt;lt;/scriptgt; Ответ №1:
Вам нужно использовать useEffect .
Попробуйте это :
... const App = ({ jsonPersons }) =gt; { const [ persons, setPersons ] = useState([]) lt;---- empty array const [ newName, setNewName ] = useState('') const [ newNumber, setNewNumber ] = useState('') const [ filter, setFilter ] = useState('') useEffect(() =gt; { lt;---- useEffect setPersons(jsonPersons) }, [jsonPersons]) function handleDeletion(event){ const idToDelete = event.target.value handlePerson .deletion(idToDelete) handlePerson .getAll().then(persons =gt; { setPersons(persons) }) } ... При jsonPersons изменениях запускается рендеринг, и состояние persons также меняется