过滤器输入基本反应JS搜索功能的延迟

Question

我做了一个基本的电话簿应用程序，用于在线练习，让你把人们的名字和电话号码保存到电话簿中。 还有一个搜索输入，允许你根据名字过滤结果。这一切都能正常工作，但是，有一个奇怪的事情让我想不通，那就是当用户在搜索栏中输入一个字符时，过滤器总是延迟一个字符，状态并没有立即更新？

比如说

如果我在搜索栏里输入 "J"，它就会过滤"

如果我再输入'a'，那么现在搜索栏中的'Ja'就会过滤为'J'。

如果我把 "a "打上退格，现在 "J "出现在搜索栏中，它就会过滤 "Ja

诸如此类... 过滤器总是落后一步。

我是新手，似乎无法解决这个问题。 有谁能帮帮我吗，谢谢(如果有任何其他建设性的批评意见，可以改善我的代码，我非常开放和感激它)

我的代码。

const phonebook = [
  {
    id: 1,
    details: {
      name: 'Jim',
      number: '55 748 192'
    }
  },
  {
    id: 2,
    details: {
      name: 'Jason',
      number: '55 111 192'
    }
  },
  {
    id: 3,
    details: {
      name: 'Jonesy',
      number: '55 983 122'
    }
  },
  {
    id: 4,
    details: {
      name: 'Jack',
      number: '0408 729 000'
    }
  },

]


const App = (props) => {

  const [bookData, setBookData] = useState(props.props)
  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')
  const [theFilter, setTheFilter] = useState('')
  const [namesToShow, setNamesToShow] = useState(bookData.map(person => person.details))

  const [errorMessage, setErrorMessage] = useState('')

  console.log('the filter', theFilter, namesToShow)

  const addNumber = (event) => {
    event.preventDefault()
    const numberObject = {
      id: bookData.length + 1,
      details: {
        name: newName,
        number: newNumber,
      }
    }
    if(numberObject.details.name !== "" && numberObject.details.number !== '') {
      setBookData(bookData.concat(numberObject))
      setNewName('')
      setNewNumber('')
      setErrorMessage('')
    } else {
      if(numberObject.details.name === "" && numberObject.details.number === "") {
        setErrorMessage('You must enter a name and number!!')
      } else if(numberObject.details.number === "") {
        setErrorMessage('You must enter a number!!')
      } else {
        setErrorMessage('You must enter a name!!!')
      }
    }
  }

  const handleFilterChange = (event) => {
    setTheFilter(event.target.value)
    console.log(theFilter)
    if(theFilter === '') {
      setNamesToShow(bookData.map(person => person.details))
      console.log('help')
    } else {
      console.log('bookData', bookData.map(person => person.details))
      setNamesToShow(bookData.map(person => person.details).filter(person => person.name.includes(theFilter)))
      console.log('filter', theFilter)
      console.log('potential namestoshow?', bookData.map(person => person.details).filter(person => person.name.includes(theFilter)))
      console.log('namestoshow', namesToShow)
    }
  }

  const handleNameChange = (event) => {
    setNewName(event.target.value)
  }

  const handleNumberChange = (event) => {
    setNewNumber(event.target.value)
  }

  return (
    <>
      <h1>Phonebook</h1>
      <div>
        <input value={theFilter} onChange={handleFilterChange} placeholder='Search for a name' />
        {namesToShow.map(person => (
          <p>{person.name}: {person.number}</p>
          ))}
      </div>
      <form>
        <input value={newName} onChange={handleNameChange} placeholder='Enter a name...'/>
        <input value={newNumber} onChange={handleNumberChange} placeholder='Enter a number...'/>
        <button type='submit' onClick={addNumber}>Save</button>
      </form>
      <div>
        {errorMessage}
      </div>
    </>
  )
}



ReactDOM.render(
  <App props={phonebook} />,
  document.getElementById('root')
)

Answer 1

这是因为useState的更新是批量化的。当你设置一个新的状态时，它不会立即设置。所以在功能组件中，最好的方法是使用一个依赖于这个变量的useEffect钩子。例如：[theFilter]是一个变量。

useEffect(() => {
  doSomeJob(theFilter);
}, [theFilter])

其中[theFilter]是一个变量数组，它的变化应该启动该效果。