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"
  },
]

我不明白为什么我可以通过link访问item.link属性。

P.S。这看起来太过优雅了，其他人不知道我该如何进一步清理吗？

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

可以访问映射数组（Next.js）中对象的属性

1 个答案: