Объект, возможно, является «неопределенной» ошибкой даже после проверки существования объекта и свойства.

Я получаю ошибку Object is possibly 'undefined'. при каждой проверке свойства и доступе после story && в коде ниже. Для меня это не имеет смысла, так как первая проверка проверяет, существует ли story или нет. Если бы его не было, не замкнуло бы троичное замыкание и не вернуло бы null? Я новичок в машинописи (и новичок в реакции). Буду рад услышать любые предложения! Спасибо!

import React, { useState, useEffect } from "react";
import { getStory } from "../services/hnAPI";

interface Props {
  storyId: number;
}

export const Story: React.FC<Props> = (props) => {
  const [story, setStory] = useState();
  useEffect(() => {
    getStory(props.storyId).then((data) => data && data.url && setStory(data));
  }, [props.storyId]);
  return story && story.url ? (
    <a href={story.url}>{story.title}</a>
  ) : null;
};

reactjs typescript react-typescript
person user4396386    schedule 25.05.2020    source источник
comment
Рассмотрите возможность изменения кода здесь, чтобы он представлял собой минимальный воспроизводимый пример, как описано в Как спросить. В идеале кто-то может поместить его в отдельную IDE, например TypeScript Plaground, и продемонстрировать вашу проблему самостоятельно. Сейчас у меня нет доступа к "../services/hnAPI";, поэтому я получаю кучу ошибок. Возможно, проблема в том, что useState() выводит undefined вместо нужного вам типа, и вам придется указать его самостоятельно, как const [story, setStory] = useState<StoryOrWhatever>();, но я не знаю, потому что не могу это проверить. Удачи!   -  person jcalz    schedule 25.05.2020

Ответы (1)


arrow_upward
4
arrow_downward

Вы должны передать аргумент типа useState(), чтобы он не выводил значение состояния как undefined.

Вот пример

import React, { useState, useEffect } from 'react';
import { getStory } from '../services/hnAPI';

interface Props {
  storyId: number;
}

interface Story {
  id: number;
  title: string;
  url: string;
  // properties for the Story
}

export const Story: React.FC<Props> = (props) => {
  const [story, setStory] = useState<Story | null>(null);
  useEffect(() => {
    getStory(props.storyId).then((data: Story) => data && setStory(data));
  }, [props.storyId]);
  return story && story.url ? <a href={story.url}>{story.title}</a> : null;
};

P.S. Пожалуйста, никогда не позволяйте обещанию остаться невыполненным. Если вы выполняете вызов API, это ваша getStory функция, подумайте о добавлении блока catch и правильно обработайте ошибку. Пример в том же сценарии.

export const Story: React.FC<Props> = (props) => {
  const [story, setStory] = useState<Story | null>(null);
  useEffect(() => {
    getStory(props.storyId).then((data: Story) => data && setStory(data))
      .catch(error => {
          // handle the error
          // you can use another state variable to store the error
      });
  }, [props.storyId]);
  return story && story.url ? <a href={story.url}>{story.title}</a> : null;
};
person subashMahapatra    schedule 25.05.2020
comment
Идеальный! Спасибо, субаш! Сейчас я узнаю, как добавить блок catch! - person user4396386; 25.05.2020
comment
Большой. Вот некоторые ресурсы для получения дополнительной информации об обработке ошибок с обещаниями ссылка - person subashMahapatra; 25.05.2020