如何在React Hooks中的对象内部的方法内访问对象属性

Question

我是React钩子的新手，最近一直在使用useState函数。.在普通javascript中，此代码有效：const state = {  firstname: "John",  lastname: "Doe",  greeting: function(){     return sayHello(this.firstname,this.lastname)  }}const sayHello = (fname,lname)=>{  return `Hello i'm ${fname} ${lname}, nice to meet you!`;}console.log(state.greeting()); //outputs "Hello i'm John Doe, nice to meet you!"但是使用React钩子：const [state,setState] = useState({  firstName: "John",  lastName: "Doe",  greeting: function(){    return sayHello(this.firstName,this.lastName)  }})const sayHello = (fname,lname) => console.log(`Hello i'm ${fname} ${lname}, nice to meet you!`);const { firstName, lastName, greeting } = state;return (    <div>        <button className="btn" onClick={greeting()}>Greet</button>    </div>)我收到一条错误消息：“无法读取未定义的属性'firstName'”，并且如果我仅在方法中使用“ firstName”和“ lastName”而不使用“ this”关键字的话，也会得到[object object]。如何访问变量？

Answer 1

首先，您没有调用该greeting方法，应该调用它以使代码正常工作。

其次，您应该保持状态尽可能的精简，因此在为状态分配方法之前要三思而后行，这是放置它的更好位置。

const [firstName, setFirstName] = useState('John');

const [lastName, setLastName] = useState('Doe');

const greeting = () => {

  console.log(`Hello i'm ${firstName} ${lastName}, nice to meet you!`);

}

然后在您的代码调用中的某处greeting()。

如您所见，由于react挂钩，我们为firstName和lastName变量分配了它们的初始值和各自的设置器，因此您可以在代码中直接调用它们。

console.log(`Hi, my name is ${firstName}`) // Hi, my name is John

如果运行setFirstName('David')，然后又运行，则再次运行：

console.log(`Hi, my name is ${firstName}` // Hi, my name is David

您将获得的更新版本firstName，这不是吗？

Answer 2

发生错误的唯一可能性是在错误的greeting上下文中使用，例如作为回调。可以通过对其进行硬编码以使用正确的对象来解决此问题：

  ...

  greeting: () => sayHello(state.firstname, state.lastname)

  ...

React和React钩子鼓励使用FP而不是OOP。如果没有理由将greeting方法保留为状态的一部分，则可以是：

const [state,setState] = useState({

  firstName: "John",

  lastName: "Doe"

});

const { firstName, lastName } = state;

const greeting = () => sayHello(firstName, lastName);

useCallback 并非必需，但在某些情况下可能会有所帮助：

const greeting = useCallback(() => sayHello(firstName, lastName), [firstName, lastName]);