javascript - React Hooks useEffect 更改获取 URL 调用

Question

我是 Hooks 新手，我有这个项目 (https://thereacttimes.netlify.app/)，它使用纽约时报 API 来显示来自不同新闻部分的故事。

我创建了章节标题的 header 。如果您点击“arts”，它会将 URL 更改为 https://thereacttimes.netlify.app/arts 但我需要使用该部分标题作为获取 URL 参数，我不知道如何使用我的 useEffect Hook 重新渲染/重新获取。获取 URL 允许我们像这样传递 section 来获取不同的故事: fetch("https://api.nytimes.com/svc/topstories/v2/{section}.json ?api-key=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr)。

如果您问自己为什么它现在在生产环境中工作，那是因为我将 URL 硬编码为:fetch("https://api.nytimes.com/svc/topstories/v2/home.json?api-key=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr)

我应该在 useEffect Hook 中更改哪些内容？ 我应该向 header 组件中的按钮添加什么来调用重新渲染？

新闻组件

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

  useEffect(() => {
    fetch(`"https://api.nytimes.com/svc/topstories/v2/{section}.json?api-key=""`)
      .then((res) => res.json())
      .then((data) => {
        setTimeout(() => setStory(data), 1500);
        console.log("Success ", data);
      })
      .catch((error) => {
        console.log("Error", 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) => {
            return (
              <Story
                title={story.title}
                abstract={story.abstract}
                img={story.multimedia[0].url}
                alt={story.multimedia[0].caption}
                link={story.url}
              />
            );
          })}
        </ul>
        <Spacer height={100} />
      </>
    );
  }
}

header 组件

import React from "react";
import uuid from "uuid";

var sections = [
  "arts",
  "business",
  "fashion",
  "health",
  "movies",
  "opinion",
  "politics",
  "science",
  "sports",
  "technology",
];

export default function Masthead() {
  return (
    <div className="masthead">
      {sections.map((section) => {
        return (
          <a href={section} key={uuid}>
            <span>{section}</span>
          </a>
        );
      })}
    </div>
  );
}

Answer 1

为了能够在部分更改时重新渲染新闻组件，您需要将部分添加到 useeffect 中的依赖项列表中，例如 [section]。

顺便说一句，新闻组件中没有section变量，我猜你想要做的是将一个section参数传递给新闻组件，如果是这样你最好使用routing ，并将section参数传递给News组件。

这是一个工作 codesandbox还有一些其他更改和重构: