Firebase 不刷新图像（反应）

Question

I am using firebase with react to store images so that the user can upload them there and then have them be displayed and I manage to display the uploaded image but when I refresh the page. The image gets removed, my function userProfileImage() does not seem to update the image, how can I keep the image?

  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("");
  const [progress, setProgress] = useState(0);

  const handleChange = e => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  const userProfileImage = () => {
    updateProfile(auth.currentUser, {
      //old image
      photoURL: <Avatar sx={{ width: 250, height: 250 }} />
    }).then(() => {
      // Profile updated!
      <Avatar src={url} sx={{ width: 250, height: 250 }} />
    }).catch((error) => {
      // An error occurred
      console.log(error);
    });
  }
    
 

  const handleUpload = () => {
    const uploadTask = 
    storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
      "state_changed",
      snapshot => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      error => {
        console.log(error);
      },
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then(url => {
            setUrl(url);
          });
      }
    );
    userProfileImage();
  };

  return (
    <div className='App'>
    <Header/>
    <br />
    <br />
    {progress > 0 && progress < 100 ?
    <progress value={progress} max="100" /> : <div></div>
    }
    <div class="proPic">
    <Avatar src={url} sx={{ width: 250, height: 250 }} />
    <input type="file" onChange={handleChange} />
    <button onClick={handleUpload}>Submit</button>
    </div>
    </div>
  )
}

Answer 1

When you are refreshing, all the components will also be refreshed. As a result all the states will be reinitialized. So when you refresh, url will be null again. So you should retrieve the image when the component is refreshed. You can retrive the uploaded image inside a useEffect hook.

useEffect(()=>{
//retrieve image
},[]}