如何在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 = () => {&nbsp; 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上下文中使用，例如作为回调。可以通过对其进行硬编码以使用正确的对象来解决此问题：&nbsp; ...&nbsp; greeting: () => sayHello(state.firstname, state.lastname)&nbsp; ...React和React钩子鼓励使用FP而不是OOP。如果没有理由将greeting方法保留为状态的一部分，则可以是：const [state,setState] = useState({&nbsp; firstName: "John",&nbsp; lastName: "Doe"});const { firstName, lastName } = state;const greeting = () => sayHello(firstName, lastName);useCallback 并非必需，但在某些情况下可能会有所帮助：const greeting = useCallback(() => sayHello(firstName, lastName), [firstName, lastName]);