如何在页面刷新时使用 useEffect() 将状态设置为运行？

Question

我的代码一点也不长也不复杂。这很简单。所以请阅读！（我正在使用反应 + next.js）

在根文件中，app.js，我有 useEffect 来获取照片数据。该数据数组将在页面组件中使用，因此我通过

function MyApp({ Component, pageProps }) {
  const [photoData, setPhotoData] = useState([]);
  const [user, setUser] = useState([]);


  useEffect(() => {
    const getPhotos = async () => {
      try {
        const photoData = await axios.get(
          "https://jsonplaceholder.typicode.com/albums"
        );
        setPhotoData(photoData.data);
      } catch (error) {
        console.log(error);
      }
    };

    getPhotos();
  }, []);


useEffect(() => {
         //code for finding user. no external api used.
        setUser(user);
      }
    }
  }, []);


  const passedProps = {
    ...pageProps,
     photoData,
     user
  };

  return (
            ...
          <Component {...passedProps} /> 
   )

然后我将数据（照片数据）从一个 Home 组件传递给一个（app.js 的）孙组件，一个 Photo 组件

export default function Home({ photoData, user }) {
 return(
          <Photo photoData={photoData} user={user} />
)

在 Photo 组件中，我正在接收 photoData 并尝试使用 photoData 的默认状态设置 photoArr 的状态。首次加载整个应用程序时，photoData 成功传递到 Photo 组件，它可以毫无问题地设置状态。
但主要问题是，当我在照片页面（照片已加载）并刷新页面时，它不会使用 photoData 设置 photoArr 的状态。即使我可以控制台记录从 app.js 收到的 photoData，它也不会使用默认状态 photoData 设置状态 photoArr。

export default function Photo({ photoData, user }) {

  const [photoArr, setPhotoArr] = useState(photoData); 
//I have this as state because I change this array 
//later on in this component (doing CRUD on the photo array).
  

 console.log(photoData); // this returns the array received from app.js
 console.log(photoArr);  // [].   returns an empty array
 console.log(user); // returns the user object received from app.js.

return (
<div>
 {photoArr.length > 0 ? 
  .... code mapping photoArr 
  : "Data is empty"       //It returns this comment when I refresh the page
}
</div>
)

正如您在上面看到的，当我刷新页面时，我得到“数据为空”，这意味着即使在给定的默认状态下 photoArr 也没有设置。如果我不断刷新页面多次，它仍然显示一个空白页面。根据我的研究，这是由于设置状态是异步的？那么我该如何解决这个问题呢？

Answer 1

试试这个：（在您的照片页面中）

const [photoArr, setPhotoArr] = useState(null); 

useEffect(() => {
    if(photoData.length) setPhotoArr(photoData) // If not empty, set the Arr
},[photoData]} // We listen to photoData's change

在页面加载时，您的 photoData 中没有任何数据，当它向下传递到 Photo 组件时，React 会记住该状态。但是使用 useEffect 监听 photoData 的变化，我们可以在 getPhotos 函数取回数据后设置 PhotoArr。

如何在页面刷新时使用 useEffect() 将状态设置为运行？

How to make setting state with useEffect() to run on page refresh?

reactjs

next.js

use-effect

use-state

asynchronous-javascript

如何在页面刷新时使用 useEffect() 将状态设置为 运行？

How to make setting state with useEffect() to run on page refresh?

reactjs

next.js

use-effect

use-state

asynchronous-javascript

如何在页面刷新时使用 useEffect() 将状态设置为运行？