我想知道如何使用這個 JSON 數據 HackNews

Question

嗨兄弟我正在制作 SPA 反應程序我有一些問題

const [storyIds, setStoryIds] = useState([]);
  const list = [];
  useEffect(() => {
    Top_API().then((res) => {
      this.res = res.data.slice(0, 3);
      this.res.forEach((ele) => {
        axios
          .get("https://hacker-news.firebaseio.com/v0/item/" + ele + ".json")
          .then((res) => {
            list.push({
              id: res.data.id,
              title: res.data.title,
              url: res.data.url,
              user: res.data.by,
              score: res.data.score
            });
            setStoryIds(list);
          });
      });
    });
  }, []);

這是我的代碼我想打印這個 api 數據我打印 JSON 數據這樣

{JSON.stringify(storyIds[0])}

這段代碼運行良好。 但是，從 storyIds[1] 的排列來看，它在屏幕上是不可見的。 我從控制台檢查了它是 output 。

當我將 go 轉到不同的頁面時，如果我輸出我的代碼數組的內容，返回頁面時會出現找不到數組的錯誤。 前任）

{JSON.stringify(storyIds[0].title)}

如果像上面的代碼那樣寫，就會出現數組未定義的錯誤。

我已經嘗試解決這種情況三天了。 但我找不到辦法。 幫我。

您在屏幕上打印的代碼如下。

<div className="n1">
          
          <a href={JSON.stringify(storyIds[0])}>
            {JSON.stringify(storyIds[0])}
          </a>
          <br />
          by: {JSON.stringify(storyIds[0])}
        </div>
        <div className="n2">{JSON.stringify(storyIds[1])}</div>
        <div className="n3">{JSON.stringify(storyIds[2])}</div>
      </div>

數據看起來像

[{"id":30186326,"title":"Facebook loses users for the first time","url":"https://www.washingtonpost.com/technology/2022/02/02/facebook-earnings-meta/","user":"prostoalex","score":994},{"id":30186894,"title":"In second largest DeFi hack, Blockchain Bridge loses $320M Ether","url":"https://blockworks.co/in-second-largest-defi-hack-ever-blockchain-bridge-loses-320m-ether/","user":"CharlesW","score":400}] 

我如何打印這個 API 響應我的屏幕？

Answer 1

您需要使用async await來等待來自 API 的響應

const [storyIds, setStoryIds] = useState([]);
  const list = [];
  useEffect(() => {
    Top_API().then((res) => {
      this.res = res.data.slice(0, 3);
      this.res.forEach(async (ele) => {
       await axios
          .get("https://hacker-news.firebaseio.com/v0/item/" + ele + ".json")
          .then((res) => {
            list.push({
              id: res.data.id,
              title: res.data.title,
              url: res.data.url,
              user: res.data.by,
              score: res.data.score
            });
          });
       setStoryIds(list);
      });
    });
  }, []);

Answer 2

您的代碼的問題是您正在將storyIds state 重置為每個循環周期中GET調用加載的單個元素。

嘗試像這樣更改它：

const [storyIds, setStoryIds] = useState([]);

useEffect(async () => {
  const list = [];

  let apiResponse = await Top_API();
  apiResponse = apiResponse.data.slice(0, 3);
  apiResponse.forEach(async (ele) => {
    const { data } = await axios.get(
      'https://hacker-news.firebaseio.com/v0/item/' + ele + '.json'
    );
    const { id, title, url, by, score } = data;
    list.push({ id, title, url, user: data.by, score });
  });

  setStoryIds(list);
}, []);