0

TypeScript ругается на метод isReviewLongEnough, не нравится ему this. Ниже два варианта одного и того же метода со стрелочной функцией и с декларативной функцией.

Стрелочная функция:

const [formState, setFormState] = useState({
  rating: 0,
  review: '',
  isReviewLongEnough: (): boolean => {
    const reviewLength = this.review.trim().length;
    return reviewLength >= MIN_REVIEW_SIMBOLS && reviewLength <= MAX_REVIEW_SIMBOLS;
  }
});

Обычная функция:

const [formState, setFormState] = useState({
   rating: 0,
   review: '',
   isReviewLongEnough(): boolean {
     const reviewLength = this.review.trim().length;
     return reviewLength >= MIN_REVIEW_SIMBOLS && reviewLength <= MAX_REVIEW_SIMBOLS;
   }
});

Я так понял что проблема в том что у this - тип any. Т.к. я только первую неделю изучаю тупСкрип и реакт, я не могу даже понять какой использовать синтаксис, чтобы правильно обозначить тип у this

8
  • function(this: SomeType)
    – zxcqwe
    19 июл 2022 в 9:38
  • Первая очевидно неверна вообще. Вторая зависит от того как вызывается функция isReviewLongEnough. Я бы сказал что неплохо бы узнать в чём же состоит разница между стрелочной и обычной функцией.
    – Alexey Ten
    19 июл 2022 в 9:41
  • Отдельный вопрос, зачем вообще в state класть функцию…
    – Alexey Ten
    19 июл 2022 в 9:42
  • @AlexeyTen стрелочная получает контекст в момент создания, обычная в момент вызова, если я не ошибаюсь. Но когда я использую тупСкрип я не совсем понимаю какие знания из JS применимы в том или ином случае. Тупскрип сильно запутывает, не знаю что мне можно делать, а что нельзя.
    – TupoScrip
    19 июл 2022 в 9:44
  • const isReviewLongEnough = (): boolean {}; ... useState({ isReviewLongEnough }) 19 июл 2022 в 9:44

1 ответ 1

0

Я не могу себе представить причину зачем бы в state класть функцию. Так что нужно просто вытащить её из state и вообще не заморачиваться с this.

const [formState, setFormState] = useState({
  rating: 0,
  review: ''
});

const isReviewLongEnough: (): boolean => {
    const reviewLength = formState.review.trim().length;
    return reviewLength >= MIN_REVIEW_SIMBOLS && reviewLength <= MAX_REVIEW_SIMBOLS;
  }
};
6
  • по красоте formState.review?.trim().length ?? 0 или (formState.review ?? '').trim().length 19 июл 2022 в 10:06
  • Я уже вытащил функцию из стейта. Но почему-то она не вызывается, когда Реакт перерисовывает компонент.
    – TupoScrip
    19 июл 2022 в 10:19
  • Я тупень, не правильно написал сам код функции, нужно было инвертировать булево значение, которое возвращает функция. Теперь всё работает. Всем спасибо, за помощь и советы. Вопрос закрыт.
    – TupoScrip
    19 июл 2022 в 10:36
  • @nörbörnën ну если кто-то в стейт забудет положить строку, то сам себе злобный буратино =)
    – Alexey Ten
    19 июл 2022 в 11:02
  • @nörbörnën на вот этот код - formState.review ?? '').trim().length, - почему-то вылезает ошибка. С другой стороны не совсем понял, зачем нужен оператор нулевого слияния, если у меня в стейте в уже есть поле review: ''? formState.review.trim().length; - сейчас возвращает ноль, даже если я ничего не записываю в это поле стейта.
    – TupoScrip
    19 июл 2022 в 11:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.