时间戳

首页 > 解决方案 > React 中的 setState 不会更新

reactjs - React 中的 setState 不会更新

问题描述

我需要通过来自 firebase 的 querySnapshot 从 S3 获取数据，它给了我密钥然后显示视频，我使用 setVideos 更新包含 RetrivedVideo 的视频数组，这是一个需要 id 和 url 的类，我的问题是当我打电话时setVideos 它没有向我显示视频，你能帮我吗？

import React, { useState, useEffect } from "react";
import Video from "./Video";
import "./Home.css";
import RetrivedVideo from "./RetrivedVideo.js";
import { collection, getDocs } from "firebase/firestore";
import { getFirestore } from "firebase/firestore";
import firebaseApp from "./firebase.js";
import { Storage } from "aws-amplify";

export default function Home() {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    let data = [];

    const db = getFirestore();
    
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "videos"));
      querySnapshot.forEach(async (doc) => {
        await Storage.get(doc.id).then((signedURL) => {
          const retrivedVideo = new RetrivedVideo(doc.id, signedURL);
          data.push(retrivedVideo);
        });
      });
      setVideos([...videos, ...data]);
      console.log(videos);
    }
    fetchData();
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className="app">
      <div className="container-videos">
      {videos.map((v) => (
          <Video
            className="video"
            key={v.id}
            url={v.url}
          />
        ))}
      </div>
    </div>
  );
}

标签： reactjs

解决方案

您正在加载数据之前设置状态。另一个错误是你使用了错误的扩展运算符，它应该在一个数组中[...myArr, ...mySecArr]

尝试setVideos在 fetchData 函数中移动

useEffect(() => {
    let data = [];

    const db = getFirestore();
    
    async function fetchData() {
      const querySnapshot = await getDocs(collection(db, "videos"));
      querySnapshot.forEach(async (doc) => {
        const signedUrl = await Storage.get(doc.id);
        const retrivedVideo = new RetrivedVideo(doc.id, signedURL);
        data.push(retrivedVideo);
      });
      setVideos([...videos, ...data]);
    }
    fetchData();
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

推荐阅读