使用 Map 解析列表项的正确方法是什么？

Question

在道具解析过程中出现以下错误：

无法读取未定义的属性“地图”

在道具props.doubleArray中。 但是，当我打印它时，它会在控制台中显示一个双数组。 map的正确使用方法是什么？

class Menu extends Component {

render() {
return (
<div className="menu__row">
            <ListItems
              doubleArray={[
                [
                  "New & Featured",
                  "Shop All New Arrivals",
                  "SNKRS Launch Calendar",
                  "Best of Air Max",
                  "Member Access",
                ],
                [
                  "New & Featured",
                  "Shop All New Arrivals",
                  "SNKRS Launch Calendar",
                  "Best of Air Max",
                  "Member Access",
                ],
                [
                  "New & Featured",
                  "Shop All New Arrivals",
                  "SNKRS Launch Calendar",
                  "Best of Air Max",
                  "Member Access",
                ],
                [
                  "New & Featured",
                  "Shop All New Arrivals",
                  "SNKRS Launch Calendar",
                  "Best of Air Max",
                  "Member Access",
                ],
              ]}
            />
            <ListItems />
          </div>

);
}
}

function ListItems(props) {
  return (
<div className="listItems">
  {props.doubleArray.map((array) => (
    <ul className="listItems__column" key={array.id} value={array}>
      <li className="listItems__title"> {array[0]}</li>
      {array.map((item, index) =>
        index > 0 ? (
          <li className="listItems__text" key={item.id} value={item}>
            {item}
          </li>
        ) : null
      )}
    </ul>
  ))}
</div>
  );
}

export default Menu;

Answer 1

尝试这个：

<div className="listItems">
  {props.doubleArray && props.doubleArray.map((array) => (
    <ul className="listItems__column" key={array.id} value={array}>
      <li className="listItems__title"> {array[0]}</li>
      {array.map((item, index) =>
        index > 0 ? (
          <li className="listItems__text" key={item.id} value={item}>
            {item}
          </li>
        ) : null
      )}
    </ul>
  ))}
</div>