如何在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]);