使用嵌套数组设置默认参数

Question

在我的React项目中，我传入一个对象数组，想知道如何为嵌套数组设置默认参数。我已经在主数组const Nav = ({ navItems = [] })上设置了它，但是不知道如何设置嵌套数组。从逻辑上讲，我尝试过const Nav = ({ navItems = [], navItems.subMenu = [] })，但是语法似乎不正确。

JSX：

const Nav = ({ navItems = [] }) => {

const subItems = navItems.map(el => el.subMenu)

return (
  {navItems.map(item => (
    <li>
      <a href="#">{item.label}</a>
      <ul>
        {subItems[0].map(subItem => (
            <li>{subItem.item}</li>
        ))}
      </ul>
    </li>
  ))}
)

}

道具通过：

<Nav
        navItems={[
          {
            label: "About",
            subMenu: [
              {
                id: 1,
                item: "About Sub Item 1",
              },
              {
                id: 2,
                item: "About Sub Item 2",
              },
              {
                id: 3,
                item: "About Sub Item 3",
              },
            ],
          },
          {
            label: "Blog",
            subMenu: [
              {
                id: 1,
                item: "Blog Sub Item 1",
              },
              {
                id: 2,
                item: "Blog Sub Item 2",
              },
              {
                id: 3,
                item: "Blog Sub Item 3",
              },
            ],
          },
        ]}
      />

Answer 1

您去这里：

const Nav = ({ navItems = [{subMenu : []}] })

// I think you also need to set for label also, else will throw error while render
const Nav = ({ navItems = [{ label: "Default label" ,subMenu : []}] })

建议，您可以将代码块更改为如下所示：

const Nav = ({ navItems = [] }) => {
  // there is no need of below line
  // const subItems = navItems.map(el => el.subMenu)  

  return (
    {navItems.map((item) => (
      <li>
        <a href="#">{item.label}</a>
        <ul>
          {item.subMenu.map(subItem => ( //<---- you can use it like this
              <li>{subItem.item}</li>
          ))}
        </ul>
      </li>
    ))}
  ) 
}

Answer 2

我认为问题可能在于它无法解构您要传递的数组。如果您执行({obj})，它将被解构并访问其属性。如果无法解构，则会触发错误。它应该像这样工作

const Nav = ( navItems = [] ) => {

const subItems = navItems.map(el => el.subMenu)

return (
  {navItems.map(item => (
    <li>
      <a href="#">{item.label}</a>
      <ul>
        {subItems[0].map(subItem => (
            <li>{subItem.item}</li>
        ))}
      </ul>
    </li>
  ))}
)

}