我试图理解为什么我不能将数据对象的数组属性作为 prop 传递到组件中。认为这是一个关于 React 工作原理的基本理解问题，和/或在这种情况下的陷​​阱……任何见解都值得赞赏！

上下文：我正在为 React 中的会议制作一个展示页面。此展示页面将显示“title”、“description”等元素，并遍历“agenda_items”列表。

数据来自单个 JSON API 响应。“agenda_items”是数据结构中的嵌套数组。

{
  data: {
    id: 2,
    title: "Example title",
    description: "Example description",
    agenda_items: [
      {
        id: 5,
        title: "Topic 1"
      },
      {
        id: 6,
        title: "Topic 2"
      }
    ]
  }
}

以下实现有效。我正在使用 React.useState() 分别设置 meeting 和 agenda_items ，尽管 agenda_items 理论上可以通过 meeting.agenda_items 访问。

const Meeting = () => {
  const [meeting, setMeeting] = React.useState([]);
  const [agenda_items, setAgendaItems] = React.useState([]);

  const handleFetchMeeting = React.useCallback(() => {
    axios
      .get(url)
      .then(result => {
        setMeeting(result.data);
        setAgendaItems(result.data.agenda_items);
      })
  });

  React.useEffect(() => {
    handleFetchMeeting();
  }, []);

  return (
    <div>
      <h1>{meeting.title}</h1>
      <AgendaList list={agenda_items} />
    </div>
  );
}

const AgendaList = ({ list }) => {
  return (
    <div>
      <h3>Agenda</h3>
      {list.map(item => (
        <Item 
          key={item.id}
          item={item}
        />
      ))}
    </div>
  );
}

但是，如果我尝试将 meeting.agenda_items 作为参数传递到 <AgendaList> ，它会引发异常。我原本以为这两种实现是等效的，但似乎不是？

...

return (
    <div>
      <h1>{meeting.title}</h1>
      <AgendaList list={meeting.agenda_items} />
    </div>
  );
)

//INSTEAD OF
/*
return (
    <div>
      <h1>{meeting.title}</h1>
      <AgendaList list={agenda_items} />
    </div>
  );
)
*/

Uncaught TypeError: Cannot read property 'map' of undefined
    at AgendaList (Meeting.jsx:52)
    at renderWithHooks (react-dom.development.js:14972)
    at mountIndeterminateComponent (react-dom.development.js:17734)
    at beginWork (react-dom.development.js:18935)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3922)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3971)
    at invokeGuardedCallback (react-dom.development.js:4031)
    at beginWork$1 (react-dom.development.js:23780)
    at performUnitOfWork (react-dom.development.js:22616)
    at workLoopSync (react-dom.development.js:22553)

为什么 React 在查找/渲染 {meeting.title} 时没有问题，但随后却调用 {meeting.agenda_items} 未定义？

这个错误是否发生在组件第一次渲染时，在异步数据调用完成之前？