在 React 中渲染 Arrays

Question

我試圖將子數組渲染為一個單獨的項目，但它一直在一個列表中渲染所有子數組項目`

 const items = [
    { id: 1, header: "Global", lst: "All Fruits" },
    {
      id: 2,
      header: "By Taste",
      lst: ["sweet", "sour", "bitter"],
    },
    {
      id: 3,
      header: "By Region",
      lst: [
        "Tropical",
        "dry",
        "Continental",
        "Temperate",
        "Polar",
      ],
    },
  ];

`

`

<ul className="dd-list">
          {items.map((item) => (
            <div key={item.id}>
              <i>{item.header}</i>

              <li className="dd-list-item">
                <button
                  type="button"
                  onClick={(e) => {
                    setSelected(item.lst);
                    setOpen(false);
                  }}
                >
                  {item.lst}
                </button>
              </li>
            </div>
          ))}
        </ul>

`這是結果

提前致謝

預期結果

按口味-甜 -酸 -苦按地區-熱帶 -干 -大陸 -溫帶 -極地

Answer 1

你應該添加內部列表

  <ul className="dd-list">
    {items.map((item) => (
      <li key={item.id}>
        <i>{item.header}</i>
        <ul>
          {item.lst.map((innerItem) => (
            <li key={innerItem} className="dd-list-item">
              <button
                type="button"
                onClick={(e) => {
                  setSelected(innerItem);
                  setOpen(false);
                }}
              >
                {innerItem}
              </button>
            </li>
          ))}
        </ul>
      </li>
    ))}
  </ul>

Answer 2

您需要迭代 items 中的lst items 。 我注意到你的項目中的第一個 object 不是數組

解決方案

 const items = [
    { id: 1, header: "Global", lst: ["All Fruits"] },
    {
      id: 2,
      header: "By Taste",
      lst: ["sweet", "sour", "bitter"],
    },
    {
      id: 3,
      header: "By Region",
      lst: [
        "Tropical",
        "dry",
        "Continental",
        "Temperate",
        "Polar",
      ],
    },
  ];

return <ul className="dd-list">
    {items.map((item) => (
      <li key={item.id}>
        <i>{item.header}</i>
        <ul>
          {item.lst.map((innerLstItems,index) => (
            <li className="dd-list-item" key={index}>
              <button
                type="button"
                onClick={(e) => {
                  setSelected(innerLstItems);
                  setOpen(false);
                }}
              >
                {innerItem}
              </button>
            </li>
          ))}
        </ul>
      </li>
    ))}
  </ul>