可以訪問映射數組中對象的屬性（Next.js）

Question

我正在嘗試映射對象數組並將鏈接屬性作為<li></li>返回，但由於某種原因沒有返回任何內容：

import { useState, useEffect } from "react";
import { Config } from "../../config";

export default function Navbar() {
  const [navs, setNavs] = useState();
  const [mainNav, setMainNav] = useState();
  const [links, setLinks] = useState();

  useEffect(async () => {
    const res = await fetch(`${Config.apiUrl}/navs`);
    const data = await res.json();
    setNavs(data);
    // !!navs && setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null)));
  }, []);

  useEffect(() => {
    !!navs && setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null)));
    !!mainNav && setLinks(mainNav.map((item) => item.link));
  }, [navs]);

  !!links && console.log(links);

  return (
    <nav>
      <ul>{!!links && links.map((item) => <li>{item.link}</li>)}</ul>
    </nav>
  );
}

我的console.log(links)結果顯示以下輸出：

[
  {
     _id: "5f975d6d7484be510af56903", link: "home", url: "/", __v: 0, id: "5f975d6d7484be510af56903"
  },
  {
     _id: "5f975d6d7484be510af56904", link: "posts", url: "/posts", __v: 0, id: "5f975d6d7484be510af56904"
  },
]

我不明白為什么我可以通過item.link訪問link屬性。

PS 這開始看起來太不優雅了，有沒有其他人知道我可以如何清理它？

Answer 1

問題就在這里，

useEffect(() => {
    !!navs && setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null)));
    !!mainNav && setLinks(mainNav.map((item) => item.link));
}, [navs]);

問題是在上述 useEffect 中設置 state 中的值后，您正在使用 state 中的 mainNav。 它不會等待狀態更新然后獲取結果。 你在這里有兩個選擇，

要么像這樣聲明另一個 useEffect，

useEffect(() => {
    !!navs && setMainNav(navs.map((x) => (x.name === "main-nav" ? x : null)));
}, [navs]);

useEffect(() => {
    !!mainNav && setLinks(mainNav.map((item) => item.link));
}, [mainNav]);

或者您可以首先將 mainNav 存儲在一個變量中。 像這樣，

useEffect(() => {
    let mainNavData = [];
    if(!!navs) {
         mainNavData = navs.map((x) => (x.name === "main-nav" ? x : null));
         setMainNav(mainNavData);   
         setLinks(mainNavData.map((item) => item.link));
    }
}, [navs]);