即使在检查该对象并且属性存在之后，对象也可能是 'undefined' 错误

Question

在下面的代码中 story && 之后，我在每次属性检查和访问时都收到 Object is possibly 'undefined'. 错误。这对我来说没有意义，因为第一个检查是检查 story 是否存在。如果不存在，那三元不就短路了，returnnull吗？我是 typescript 的新手（也很想做出反应）。我很乐意听到任何建议！谢谢！

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;
};

Answer 1

您应该将类型参数传递给 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;
};

即使在检查该对象并且属性存在之后，对象也可能是 'undefined' 错误

Object is possibly 'undefined' error even after checking that object and property exists

typescript

reactjs

react-typescript

即使在检查该对象并且 属性 存在之后，对象也可能是 'undefined' 错误

Object is possibly 'undefined' error even after checking that object and property exists

typescript

reactjs

react-typescript

即使在检查该对象并且属性存在之后，对象也可能是 'undefined' 错误