React 钩子：无法更新函数组件内部的状态

Question

我是 React 的新手，正在尝试弄清楚如何制作电话簿。我已经走得很远了，但我遇到了一个我无法解决的问题。我正在使用 React Hooks。

一切正常，除了当我在addPerson()末尾调用setNewNumber('')和setNewName('')函数时，就在filteredEntries常量之前。 我想在addPerson()内的其他代码运行完毕后将表单中的输入字段重置为空字符串 (''(，但似乎从未调用过这两个函数，因为newName和newNumber的值不会更改为''(相反，它们保留用户添加的值(。但是，我的其他useState函数(setPersons()和setFilteredPersons()(在addPerson()...

我尝试阅读文档并四处询问，但没有找到解决方案。我将非常感谢任何线索/帮助！

import React, { useState } from 'react'
import Person from './components/Person'
const App = () => {
const [ persons, setPersons ] = useState([
{ name: 'Cat', number: '111' },
{ name: 'Dog', number: '222' },
{ name: 'Horse', number: '333' },
{ name: 'Owl', number: '444' }
]) 
const [filteredPersons, setFilteredPersons] = useState([...persons])
const [ newName, setNewName ] = useState('')
const [ newNumber, setNewNumber ] = useState('')
const addPerson = (event) => {
event.preventDefault()
const createPerson = () => {
const personObject = {
name: newName,
number: newNumber,
}
setPersons([...persons, personObject])
setFilteredPersons([...persons, personObject]) //varför går det inte att bara köra [...persons?]
}
const upperCaseNewName = newName.toUpperCase()
let doubleName
persons.map(person => {
const upperCasePerson = person.name.toUpperCase()
if(upperCaseNewName === upperCasePerson) {
doubleName = upperCasePerson
}
return doubleName
})
if (doubleName === undefined) {
createPerson()
} else if(doubleName === upperCaseNewName) {
alert(`${newName} is already in the phonebook`)
}
setNewName('')
setNewNumber('')
}
const filterEntries = event => {
let filtered = persons.filter(person => {
return person.name.toUpperCase().indexOf(event.target.value.toUpperCase()) !== -1
})
setFilteredPersons(filtered)
}
const renderPersons = () => filteredPersons.map(person =>
<Person key={person.name} name={person.name} number={person.number}/>
)
return (
<div>
<h2>Phonebook</h2>
<p>Filter entries:</p> <input onChange={(event) => filterEntries(event)}/>
<form>
<div>
name: <input onChange={(event) => setNewName(event.target.value)}/>
<br/>
phone: <input onChange={(event) => setNewNumber(event.target.value)}/>
</div>
<div>
<button type="submit" onClick={addPerson}>add</button>
</div>
</form>
<h2>Numbers</h2>
{renderPersons()}
</div>
)
}
export default App

顶部的 person 组件仅包含以下代码：

import React from 'react'
const Person = (props) => {
return(
<>
<p>{props.name} {props.number}</p>
</>
)
}
export default Person

Answer 1

您的组件实际上并未绑定到您的状态值。你需要他们被"控制"。查看文档以获取更多示例:)

https://reactjs.org/docs/forms.html#controlled-components

<input value={newName} onChange={event => setNewName(event.target.value)} />

Answer 2

重置工作正常。您忘记做的是将value添加到每个输入中。如果没有value属性，则输入被视为不受控制的组件。从听起来，您希望通过代码控制值。

改变

<div>
name: <input onChange={event => setNewName(event.target.value)} />
<br />
phone: <input onChange={event => setNewNumber(event.target.value)} />
</div>

自

<div>
name: <input value={newName} onChange={event => setNewName(event.target.value)} />
<br />
phone: <input value={newNumber} onChange={event => setNewNumber(event.target.value)} />
</div>

代码沙盒演示

Answer 3

您错过了向input添加value属性，因此您的组件不是"受控"组件。

您可以在此处阅读更多内容。

需要的改变

<input
value={newName}
onChange={event => setNewName(event.target.value)}
/>
<br />
phone:
<input
value={newNumber}
onChange={event => setNewNumber(event.target.value)}
/>

代码沙盒链接：https://codesandbox.io/s/crimson-frog-ecp98

希望这有帮助！