如何在React渲染組件之前分派給Reducer？-有解無憂

在這里反應新人。

我正在使用加載微調器在組件中加載當天的天文圖片。我希望頁面每次從導航欄呼叫它時都能獲取資料，但在顯示微調器之前它會閃爍舊資料。

如何避免這種行為？我不想使用 ComponentWillMount 因為它已被棄用并且我正在使用函式。

組件代碼：

import { useEffect, useContext } from 'react'
import { getApod } from '../context/nasa/NasaActions'
import NasaContext from '../context/nasa/NasaContext'
import Spinner from './layout/Spinner'

function Apod() {
  const {loading, apod, dispatch} = useContext(NasaContext)
  useEffect(() => {
    dispatch({type: 'SET_LOADING'})
    const getApodData = async() => {
      const apodData = await getApod()
      dispatch({type: 'SET_APOD', payload: apodData})
    }
    getApodData()
  }, [dispatch])

  const {
    title,
    url,
    explanation,
  } = apod

  if (loading) { return <Spinner /> }
  return (
    <div>
      <h2>{title}</h2>
      <img src={url} className='apod' alt='apod'/>
      <p>{explanation}</p>
    </div>
  )
}

export default Apod

謝謝你的時間。

編輯：我洗掉了存盤庫。它已經正確回答了。

uj5u.com熱心網友回復：

我建議您使用另一種解決方案來保持導航欄清潔。

您可以loaded使用useRef鉤子宣告一個實體變數。一旦將 apod 分派到您的商店，此變數將被初始化為 false 并設定為 true。

import { useContext, useRef } from 'react'

function Apod() {
  const {apod, dispatch} = useContext(NasaContext)
  const loaded = useRef(false);
  const {title, url, explanation} = apod

  useEffect(() => {
    dispatch({type: 'SET_LOADING'})
    const loadApod = async() => {
      const apodData = await getApod()
      loaded.current = true;
      dispatch({type: 'SET_APOD', payload: apodData})
    }
    loadApod()
  }, [dispatch])

  if (!loaded.current) { return <Spinner /> }
  return (
    <div>
      <h2>{title}</h2>
      <img src={url} className='apod' alt='apod'/>
      <p>{explanation}</p>
    </div>
  )
}

export default Apod;

uj5u.com熱心網友回復：

我有一個想法，使用導航欄按鈕上的 onClick 清理背景關系中的物件。這是最好的方法嗎？我不知道，但它按我的意愿作業。

import NasaContext from '../../context/nasa/NasaContext'
import { useContext } from 'react'
import { Link } from 'react-router-dom'
import logo from './assets/logo.png'


function Navbar() {
  const {dispatch} = useContext(NasaContext)
  const resetApod = () => {
    const pathname = window.location.pathname
    if ( pathname !== '/' ) {
      dispatch({type: 'SET_APOD', payload: {}})
    }
  }
  return (
    <div className="navbar">
      <div className="navbar-logo">
        <img src={logo} alt='Experimentum'/>
      </div>
      <div className="navbar-menu">
        <Link to='/' onClick={resetApod}>APOD </Link>
        <Link to='/about'>ABOUT </Link>
      </div>
    </div>
  )
}

export default Navbar

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395213.html

標籤：反应

上一篇：如何映射具有不同陣列項的組件

下一篇：如何在反應中默認啟用順風暗模式？