反应钩子：无法在 function 组件内更新 state

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

您的组件实际上并未与您的 state 值相关联。 你需要他们被“控制”。 查看文档以获取更多示例：)

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>

Codesandbox 演示

Answer 3

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

你可以在这里阅读更多。

需要的改变

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

Codesandbox 链接： https://codesandbox.io/s/crimson-frog-ecp98

希望这可以帮助！