抽屉内容中未定义导航

// 父组件
import React, { useState } from 'react';
import DrawerComponent from './DrawerComponent';

function ParentComponent() {
  const [navigation, setNavigation] = useState({ /* 初始化导航对象 */ });

  return (
    <div>
      <button onClick={() => setNavigation({ /* 设置导航对象 */ })}>Open Drawer</button>
      <DrawerComponent navigation={navigation} />
    </div>
  );
}

// 抽屉组件
import React from 'react';

function DrawerComponent({ navigation }) {
  if (!navigation) {
    return null; // 或者显示加载中的提示
  }

  return (
    <div>
      {/* 使用 navigation 对象 */}
    </div>
  );
}

function DrawerComponent({ navigation = {} }) {
  return (
    <div>
      {/* 使用 navigation 对象 */}
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function DrawerComponent() {
  const [navigation, setNavigation] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/navigation')
      .then(response => response.json())
      .then(data => {
        setNavigation(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!navigation) {
    return null;
  }

  return (
    <div>
      {/* 使用 navigation 对象 */}
    </div>
  );
}