javascript - 我怎么在这里使用 React hooks 错误？

Question

我正在构建一个简单的电话簿，以配合赫尔辛基大学的 FullstackOpen 类(class)。我来自以下代码的日志显示我的“filterBy”状态始终是渲染落后，我也从我的 contacts.filter 中得到错误，“contact.name.toUpperCase”不是一个函数。所以我想我有 2 个问题。

1. 我什至可以在不使用类组件的情况下完成他们想让我做的事情吗？他们还没有在类(class)中介绍它们，所以我假设是的。但是我想我曾经在一个教程中听说过，当您需要状态同步时必须使用类组件(例如，使用输入来过滤屏幕上显示的对象数组)。但我无法使 filterBy 状态与过滤器输入中的内容实际同步。

2. 我知道我的行以“const contactsToShow ...”开头如果完全起作用的话，这可能不是最佳方法。如何做到最好？

代码:

import React, { useState } from 'react'
import Contact from './components/Contact'

const App = () => {
  const [contacts, setContacts] = useState([
    { name:'Guy Fieri', number: '020-4837473'},
    { name:'Gordon Ramsay', number: '75749483832'},
    { name:'Mr. Tasty', number: '43-4982839'},
    { name:'Dude man', number: '11-33-448382'},
  ]) 
  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')
  const [showAll, setShowAll] = useState(true)
  const [filterBy, setFilterBy] = useState('');

  const contactsToShow = showAll ? contacts : contacts.filter(contact => contact.name.toUpperCase().search(filterBy) !== -1)


  const rows = () => contactsToShow.map(contact =>
    <Contact
      key={contact.name}
      name={contact.name}
      number={contact.number}
    />
  )
  
  const handleContactNameChange = (event) => {
    console.log(event.target.value)
    setNewName(event.target.value)
  }

  const handleContactNumberChange = (event) => {
    console.log(event.target.value)
    setNewNumber(event.target.value)
    console.log(newNumber);
  }

  const handleFiltering = (event) => {
    console.log(event.target.value)
    setFilterBy(event.target.value)
    setShowAll(false)
    console.log(filterBy);
  }

  const addContact = (event) => {
    event.preventDefault()
    // 
    if(newName === '') return true
    if(newNumber === '') return true

    let dup = false
    contacts.forEach(contact => {
      if (contact.name === newName) dup = true
    })

    if (!dup) {
      const contactObject = {
        name: newName,
        number: newNumber
      }
  
      setContacts(contacts.concat(contactObject))
      setNewName('')
      setNewNumber('')
    }
  }

  return (
    <div>
      <h1>Phonebook</h1>
      <form onSubmit={addContact}>
      <div>
        Filter:<input value={filterBy} onChange={handleFiltering}/>
      </div>
        Name: <input
          value={newName} 
          onChange={handleContactNameChange}
        /><br/>
        Number: <input
          value={newNumber} 
          onChange={handleContactNumberChange}
        /><br/>
        <button type="submit">save</button>
      </form>
      <ul>
        {rows()}
      </ul>
    </div>
  )
}

export default App 

我可以尝试什么？我对这样的 React 很陌生。

Answer 1

您的代码需要进行一些更改。我不明白你为什么会收到此错误 contact.name.toUpperCase 因为这没有任何问题。

您正在将 contact 转换为大写而不是 filterBy。

现在，回答你的两个问题:

1. 您正在使用随 React 16 引入的钩子(Hook)。这为功能组件带来了状态。您的代码可以与钩子(Hook)或类组件一起正常工作。

2. 每当您更改任何状态变量(contact、newName、newNumber、showAll、filterBy)时，您的组件都会重新呈现。这将调用 rows() 函数并显示您想要的结果。因此，您只需将 contactsToShow 插入该函数即可。

您的代码没有任何问题。我不知道 Contact 组件是什么，所以我将其更改为 div 并添加了一个 console.log 以查看发生了什么。它运行良好。一探究竟: https://codesandbox.io/embed/vibrant-dawn-o1r1y

如果您有更多疑问，可以告诉我，我随时为您提供帮助。 :)