Question

我正在构建一个简单的电话簿，以配合赫尔辛基大学的FullstackOpen课程。我从下面的代码中获得的日志告诉我，我的“ filterBy”状态始终处于渲染状态，并且我的contacts.filter也出现错误，表明“ contact.name.toUpperCase”不是一个函数。所以我想我有2个问题。

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

2）我知道我的行以“ constcontactsToShow ...”开头。如果有功能的话，这可能不是最佳方法。如何最好地做到这一点？如果不是以下内容，则代码要点不适合阅读：https://gist.github.com/waldrupm/98b39ecc1c31f65e0cc418e9e9964c41

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转换为upperCase，而不是filterBy。

现在，回答您的两个问题：

您正在使用在react 16中引入的钩子。这使功能组件处于状态。您的代码可以与钩子或类组件一起正常工作。
每当更改任何状态变量（contact, newName, newNumber, showAll, filterBy）时，组件都会重新渲染。这将调用rows()函数并显示所需的结果。因此，您只需在函数内按contactsToShow。

您的代码没有什么坏处。我不知道什么是Contact组件，所以我将其更改为div并添加了console.log以查看正在发生的情况。运行正常。一探究竟： https://codesandbox.io/embed/vibrant-dawn-o1r1y

如果您还有其他疑问，可以告诉我，我们随时为您提供帮助。：）

我在这里如何使用React hooks错误？

1 个答案: