不使用 class Component ，仅在 React 中起作用

Question

你好，我刚刚在学习 React，我正在看教程，但在安装的版本中，React 不再使用类，它只显示功能，我想继续这样，如果可能，但我有一个问题，我不知道在哪里可以通过单击更改此部分中的名称，但它不允许我访问 persons(const)，我该怎么做？

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，但是有什么方法可以不使用类访问吗？

Answer 1

您需要使用 useState 挂钩。所有挂钩 return 去结构化数组中的两件事 (1) 状态值和 (2) 设置该状态值的函数。您在 useState() 函数中输入的值是初始值。

例如：

   const [name, setName] = useState("Ben");

这里name的初始值为"Ben"。如果我想更改该值，我可以使用 setName 函数并执行类似 setName("Jerry"); 的操作。现在 name 的值为 "Jerry".

setter（在本例中为 setName）和 this.setState（在 class 组件中）之间的最大区别是 this.setState 记得如果您没有明确定义它，则会自动为您传播以前的状态。使用钩子，你必须自己做：

例如：

const [person, setPerson] = useState({ name: "", id: "", age: "" });

如果我有这个状态，并且只想编辑这个人的名字，我必须记住每次更新状态时通过使用回调函数传播前一个状态对象 - 其中回调中的参数是之前的状态：

// just updating name
setPerson(prevPerson => ({ ...prevPerson, name: "Bob" }));

在这里，唯一改变的是“名称”值，其他一切都保持不变：

结果：{ name: "Bob", id: "", age: ""}

查看反应文档以获取更多提示和示例：https://reactjs.org/docs/hooks-state.html

不使用 class Component ，仅在 React 中起作用

No using class Component , only function in React

function

onclick

reactjs