我在这里如何使用 React 钩子是错误的?

Question

我正在构建一个简单的电话簿，以配合赫尔辛基大学的FullstackOpen课程。我来自以下代码的日志显示我的"filterBy"状态始终是后面的渲染，并且我还从我的 contacts.filter 收到错误，指出"contact.name.toUpperCase"不是一个函数。所以我想我有两个问题。

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

2. 我知道我的台词以"常量联系人显示"开头。"可能是一种不太理想的方法，如果真的有效的话。如何才能最好地做到这一点？

法典：

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 

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

Answer 1

代码中需要进行一些更改。我不明白为什么你甚至contact.name.toUpperCase收到这个错误，因为这没有任何问题。

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

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

1. 您正在使用 react 16 引入的钩子。这为功能组件带来了状态。您的代码可以很好地与钩子或类组件一起使用。

2. 每当对任何状态变量(contact, newName, newNumber, showAll, filterBy(进行更改时，组件都会重新渲染。这将调用rows()函数并显示所需的结果。因此，您只需将contactsToShow推送到函数内部即可。

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

如果您还有其他疑问，请告诉我，我随时为您提供帮助。 :)