通过本机反应在javascript中遇到数组问题

Question

代码

let allurl = []
const [toReadurl, setToReadurl] = useState([])
useEffect(() => {

  
  const listRef = sRef(storage, paramKey)

  
  // Find all the prefixes and items.
    listAll(listRef)
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        //console.log(itemRef)
        getDownloadURL(itemRef).then((url =>{
          //console.log(url)
          allurl.push(url)
          setToReadurl(allurl)
          //console.log(toReadurl)
          
        }))
      });
    }).catch((error) => {
      // Uh-oh, an error occurred!
      console.log(error)
    });
  }, [])

    console.log(toReadurl)

如果我将

console.log(toReadurl)

放在 useEffect() 之外，我只会在数组中得到 2 个项目

但是如果我把它放在函数和 useEffect() 中，我的数组中有 4 个项目

为什么我的数组项在 useEffect() 之后减少了 2？

如何保存 4 个链接以便显示出来？

Answer 1

检查此代码：

// Initialize allurl to an empty array
let allurl = []

// Initialize toReadurl state to an empty array
const [toReadurl, setToReadurl] = useState([])

useEffect(() => {
  const listRef = sRef(storage, paramKey)

  listAll(listRef)
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        getDownloadURL(itemRef).then((url => {
          // Push the new URL to allurl array
          allurl.push(url)
          // Update toReadurl state with the new array
          setToReadurl([...allurl]) // use spread operator to create a new array
        }))
      });
    }).catch((error) => {
      console.log(error)
    });
}, [])

// Use console.log inside a useEffect hook to log the updated value of toReadurl after each state update
useEffect(() => {
  console.log(toReadurl)
}, [toReadurl])

Answer 2

您可以使用

setToReadurl

中的回调函数。您将收到最新/以前的值，并且可以简单地返回一个包含以前的值和新的

url

.

的新数组

这将允许您删除

allUrl

并仅使用状态，因为

allUrl

值将在每次渲染时重置。

const [toReadurl, setToReadurl] = useState([]);

useEffect(() => {
  const listRef = sRef(storage, paramKey);

  // Find all the prefixes and items.
  listAll(listRef)
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        getDownloadURL(itemRef).then((url) => {
          setToReadurl((prevValues) => {
            return [...prevValues, url];
          });
        });
      });
    })
    .catch((error) => {
      // Uh-oh, an error occurred!
      console.log(error);
    });
}, []);

console.log(toReadurl);