可以访问映射数组中对象的属性（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 属性。

附：这开始看起来太不优雅了，还有其他人知道我该如何清理它吗？

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]);