使用firebase-firestore时react挂钩中的状态问题

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

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const snapshot = await firestore().collection('myCollection').get();
      const newData = snapshot.docs.map(doc => doc.data());
      setData(newData);
      setIsLoading(false);
    };

    fetchData();
  }, []);

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import { firestore } from 'firebase';

const MyComponent = () => {
  const [isUpdating, setIsUpdating] = useState(false);

  const handleUpdate = async () => {
    setIsUpdating(true);

    // Perform data update using Firebase Firestore
    await firestore().collection('myCollection').doc('myDoc').update({ name: 'New Name' });

    setIsUpdating(false);
  };

  return (
    <div>
      <button onClick={handleUpdate} disabled={isUpdating}>
        {isUpdating ? 'Updating...' : 'Update'}
      </button>
    </div>
  );
};

export default MyComponent;

import React, { useState } from 'react';
import { firestore } from 'firebase';

const MyComponent = () => {
  const [error, setError] = useState('');

  const handleFetchData = async () => {
    try {
      const snapshot = await firestore().collection('myCollection').get();
      const data = snapshot.docs.map(doc => doc.data());
      // Process data
    } catch (error) {
      setError('Failed to fetch data');
    }
  };

  return (
    <div>
      {error && <div>Error: {error}</div>}
      <button onClick={handleFetchData}>Fetch Data</button>
    </div>
  );
};

export default MyComponent;