我在这里如何错误地使用 React 钩子？

Question

I'm building a simple Phonebook to go along with FullstackOpen course from University of Helsinki. My logs from the below code show me that my 'filterBy' state is always a render behind and I'm also getting errors from my contacts.filter that "contact.name.toUpperCase" is not a function. So i guess I have 2 questions.

1. Can I even do what they're trying to have me do without using class components? They haven't introduced them in the course yet, so I'm assuming yes. But I thought I heard in a tutorial once that class components have to be used when you need state to be in sync (eg using an input to filter an array of objects displayed on screen). But I can't get the filterBy state to actually be in sync with what's in the filter input.

2. I know my line starting "const contactsToShow . . ." is probably a less than optimal way to do it, if functional at all. How can this best be done?

Code:

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 

What can I try? I'm very new to React like this.

Answer 1

There are some changes needed in your code. I don't see why you are even getting this error contact.name.toUpperCase because there is nothing wrong with that.

You are converting the contact to upperCase but not filterBy .

Now, to answer your two questions:

1. You are using hooks that were introduced with react 16. This brought state to functional components. Your code will work fine with hooks or class component.

2. Whenever you make a change in any state variable ( contact, newName, newNumber, showAll, filterBy ), your component re-renders. This will call the rows() function and display the result that you want. So you can just push contactsToShow inside the function.

There is nothing breaking with your code. I don't know what Contact component was, so I changed it to div and added a console.log to see what's happening. It runs fine. Check it out: https://codesandbox.io/embed/vibrant-dawn-o1r1y

You can let me know if you have more doubts, I'm here to help. :)