React 在頁面重新加載后動態渲染圖像（取決於狀態）

Question

我有一個反應組件，我嘗試動態加載圖像。 該圖像依賴於 state，它使用useEffect從后端加載。 初始 state 為空。

當我更改 state（使用表單內的下拉列表）時，圖像正確顯示，但當我重新加載頁面時，圖像不會顯示。

我想要做的是在獲取完成后重新渲染/延遲組件（或只是標簽）的渲染。 所以我使用loading作為指標，並在 fetch 返回后在 useEffect 中更改它的值。

但是當頁面重新加載時， winner的值仍然是undefined ，我沒有得到任何圖像。

const Winner = () => {
  const [winner, setWinner] = useState({"id": "", "name": ""})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/v1/winner`, {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(res => res.json())
    .then(jsonData => {
      setWinner(jsonData)
      setLoading(false)
    })
    .catch((error) => {
      console.log(error)
    })
  }, [])

  return (
    (loading ? <p>Loading..</p> : 
      <Box className="bonus">
        <img src={`./static/${winner.name}.png`.toLowerCase()} width="40px" height="40px" />
        <FormControl>
        ...
        </FormControl>
      </Box>
  ))
}

任何建議/幫助表示贊賞。

Answer 1

初始state數據和fetch后的數據不同

{“id”：“”，“名稱”：“”}

取后

{“狀態”：“成功”，“id”：“17”}

所以winner沒有name道具，

或者，您可以將初始 state 設置為null

const [winner, setWinner] = useState(null)

....

if(loading) return "loading ..."
if(!winner) return null
if(winner) return <data.../>;