Как получить доступ к свойству Object в методе внутри объекта в React Hooks - PullRequest
Новая
       13

Как получить доступ к свойству Object в методе внутри объекта в React Hooks

0 голосов
/ 11 мая 2019

Я новичок в хуках React и в последнее время играю с функцией useState. В vanilla 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>
)

Iполучаю сообщение об ошибке: «Невозможно прочитать свойство firstName» из undefined », и я также получаю [объектный объект], если я просто использую« firstName »и« lastName »в методе без ключевого слова« this ».Как я могу получить доступ к переменным?

Ответы [ 2 ]

2 голосов
/ 11 мая 2019

Прежде всего, вы не вызываете метод 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().

Как вы можете видеть, мы 'переопределите переменные 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, что лучше, не так ли?

1 голос
/ 11 мая 2019

Единственной возможностью возникновения ошибки является то, что greeting используется с неверным контекстом, например, в качестве обратного вызова. Это можно исправить, жестко запрограммировав его для использования правильного объекта: 

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

Ловушки React и React поощряют использование FP вместо ООП. Если нет причин сохранять метод 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]);
...