如何遍历主要 object 内的对象内的数组

Question

我有一个 API： https://www.gov.uk/bank-holidays.json

它包含一个 object，其中包含 3 个键（Division），其值也是 object，它包含一个显示假日详细信息（事件）的数组。 我想为每个部门打印“标题”和“日期”。 下面是代码。 如何在 Holiday.js 中呈现标题和日期的数据？

     export default function App() {
  const [data, setData] = useState([]);

  const fetApi = () => {
    fetch("https://www.gov.uk/bank-holidays.json")
      .then((res) => res.json())
      .then((items) => setData(items));
  };

  useEffect(() => {
    fetApi();
  }, []);

  return (
    <div className="App">
      <Holidays data={Object.entries(data)} />
    </div>
  );
}

/ / Holiday.js

const Holidays = ({ data }) => {
  // console.log(data);
  return (
    <div>
      <ol>
        {data.map((item, i) => {
          return (
            <li key= {i}>
              <div>title:</div>    //render title here
               <div>Date :</div>    //render date here
           </li>
          );
        })}
      </ol>
    </div>
  );
};

这是沙盒链接：在此处输入链接描述

Answer 1

将 Holliday 元素更改为：（评论说明）

const Holidays = ({ data }) => {
  // console.log(data);
  return (
    <div>
      <ol className="App">
        {data.map((item, i) => {
          // since you are passing Object.entries, the first parameter is the key
          // and the second one are the values
          const [key, obj] = item;

          // you then just have to map the event inside the values
          return obj.events.map((o, index) => (
            <li key={index}>
              <div>title: {o.title}</div>
              <div>Date : {(o.date)}</div>
            </li>
          ));
        })}
      </ol>
    </div>
  );
};

Answer 2

用这个替换你的假期

const Holidays = ({ data }) => {
  const ListItem = (array) => {
    console.log(array);
    return array[1].events.map((item, i) => {
      return (
        <li key={i}>
          <div>title: {item.title}</div>
          <div>Date :{item.date}</div>
        </li>
      );
    });
  };
  return (
    <div>
      <ol>{data.map((array) => ListItem(array))}</ol>
    </div>
  );
};

export default Holidays;