如何在从firebase拉取数据后更新react上下文

// 1. 创建上下文
const MyContext = React.createContext();

// 2. 上下文提供者组件
const MyContextProvider = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // 3. 从Firebase拉取数据并更新上下文
    const fetchData = async () => {
      const response = await firebase.database().ref('data').once('value');
      const newData = response.val();
      setData(newData);
    };

    fetchData();
  }, []);

  return (
    <MyContext.Provider value={data}>
      {/* 子组件 */}
    </MyContext.Provider>
  );
};

// 4. 上下文消费者组件
const MyComponent = () => {
  const data = useContext(MyContext);

  return (
    <div>
      {/* 使用上下文中的数据 */}
      {data.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};