reactjs - 即使在检查对象和属性存在之后，对象也可能是 'undefined' 错误

Question

我得到一个 Object is possibly 'undefined'. 在下面的代码中 story && 之后的每个属性检查和访问错误。这对我来说没有意义，因为第一个检查是检查 story 是否存在。如果不存在，那三元不就直接短路，返回null吗？我是 typescript 的新手(也很想使用react)。我很乐意听到任何建议!谢谢!

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

附:请永远不要让 promise 落空。如果您进行的 API 调用是 getStory 函数，请考虑添加一个 catch block 并正确处理错误。同一场景中的示例。

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