反应：条件渲染-“无法读取空属性'0'” [重复]

Question

突出我的问题。我正在尝试向图像道具添加条件渲染。我从 API 中提取的一些“故事”没有图像，所以我需要考虑这一点，所以我没有收到“TypeError：无法读取 null 的属性 '0'”错误，但这仍然不起作用我添加了三元运算符。

<Story
  key={idx}
  title={story.title}
  abstract={story.abstract}
  img={story.multimedia[0].url ? story.multimedia[0].url : null} // why doesn't this work?
  alt={story.multimedia[0].caption ? story.multimedia[0].caption : null} // why doesn't this work?
  link={story.url}
/>;

我可以向“占位符”图片网址添加后备链接吗？

  img={story.multimedia[0].url ? story.multimedia[0].url : "https://www.example.com/example.png"}

这里是完整的组件

export default function News() {
  const [error, setError] = useState(null);
  const [stories, setStory] = useState(null);

  useEffect(() => {
    const getCurrentPage = () => {
      const url = new URL(window.location.href);
      const page = url.pathname.split("/").pop();
      return page ? page : "home";
    };
    const section = getCurrentPage();
    fetch(
      `https://api.nytimes.com/svc/topstories/v2/${section}.json?api-key=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr`
    )
      .then((res) => res.json())
      .then((data) => {
        setTimeout(() => setStory(data), 1500);
        console.log("Success ", data);
      })
      .catch((error) => {
        console.log("Error", error);
        setError(error);
      });
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!stories) {
    return <LoadingBar type={"cylon"} color={"#193152"} />;
  } else {
    return (
      <>
        <ul className="stories">
          {stories.results.map((story, idx) => {
            return (
              <Story
                key={idx}
                title={story.title}
                abstract={story.abstract}
                img={story.multimedia[0].url ? story.multimedia[0].url : null} // why doesn't this work
                alt={ story.multimedia[0].caption ? story.multimedia[0].caption : null } // why doesn't this work?
                link={story.url}
              />
            );
          })}
        </ul>
        <Spacer height={100} />
      </>
    );
  }
}

Answer 1

Cannot read property '0' of null" 暗示 story.multimedia 是 null，这没有被检查。

您可能应该像这样扩展您的检查：

story && story.multimedia && story.multimedia[0] && story.multimedia[0].url ? story.multimedia[0].url : null

story && story.multimedia && story.multimedia[0] && story.multimedia[0].caption ? story.multimedia[0].caption : null

或者如果你想使用可选链（如果你的环境支持的话）：

story?.multimedia?.[0]?.url || null

story?.multimedia?.[0]?.caption || null

Answer 2

尝试检查类型：

 {  typeof story.multipedia[0].url === "undefined"
     ? img_default
     : story.multimedia[0].url
 }

Answer 3

看起来story.multimedia 可以是null。如果您的环境（例如，通过 babel）支持此功能，请使用 story.multimedia?.[0]，或者使用老派并使用 story.multimedia && story.multimedia[0]。