您好，我正在學習 react，我正在查看教程，但是在安裝的版本中，react 不再使用這些類，它只顯示函式，如果可能的話，我想繼續這種方式，但是我有一個問題通過單擊更改此部分中的名稱，但它不允許我訪問人（常量），我該怎么做？
import Person from './Person/Person'
function App() {
const persons = {
persons: [
{ name: 'Jose', age: 32},
{ name: 'Gabriel', age: 2}
]
}
const switchNameHandler = () => {
persons({
persons: [
{ name: 'Jose Fernando', age: 32},
{ name: 'Gabriel', age: 2}
]
})
}
return (
<div className="App">
<h1>Hi, I'm a React App!</h1>
<button onClick={switchNameHandler}> Switch Name</button>
<Person name={persons.persons[0].name} age={persons.persons[0].age}/>
<Person name={persons.persons[1].name} age={persons.persons[1].age}> I like play</Person>
</div>
);
}
export default App;
如何修復 switchNameHandler 部分？
我知道如果我使用類，我可以訪問 this.setPersons，但是有什么方法可以在不使用類的情況下訪問嗎？
uj5u.com熱心網友回復：
你需要使用useState鉤子。所有鉤子在解構陣列中回傳兩個東西（1）狀態值和（2）設定該狀態值的函式。并且您放入useState()函式中的值是初始值。
例如：
const [name, setName] = useState("Ben");
這里的初始值name是"Ben"。如果我想更改該值，我可以使用該setName函式并執行以下操作setName("Jerry");。現在的價值name是"Jerry"。
setter（在本例中setName）和this.setState（在類組件中）之間的最大區別在于，this.setState如果您沒有明確定義它，它會自動為您記住并傳播先前的狀態。使用鉤子，你必須自己做：
例如：
const [person, setPerson] = useState({ name: "", id: "", age: "" });
如果我有這個狀態，并且只想編輯這個人的名字，我必須記住每次更新狀態時都通過使用回呼函式傳播先前的狀態物件 - 其中回呼中的引數是先前的狀態：
// just updating name
setPerson(prevPerson => ({ ...prevPerson, name: "Bob" }));
在這里，唯一改變的是“名稱”值，其他一切都保持不變：
結果： { name: "Bob", id: "", age: ""}
查看 React 檔案以獲取更多提示和示例：https : //reactjs.org/docs/hooks-state.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318482.html
上一篇：Javascript生活功能
下一篇：創建一個函式來設定“nan”值