React.JS:为什么useState()在开始时是空的？

Question

我尝试提出一个GET请求，到目前为止，这是可行的。但是，可以始终在页面上显示不同的图像，这就是为什么在请求之后直接存储ID，然后可以使用该ID通过URL捕获图像。

但是，在开始时，"post" at useState({})中没有任何内容，因此它是空的。

因此生成这样的错误消息：

GET https://myip.net/undefined/undefined-normal.jpg 404 (Not Found)

post.postId在开始时还没有定义，因为里面还没有任何东西。在那之后，1ms之后，它不再是未定义的，图像就会显示出来。

但这是非常恼人的，因为图像在开始时找不到，错误消息出现在控制台中。

我希望有人能帮我:)

import React from 'react'
import { Link, useLocation, Navigate } from 'react-router-dom'
import axios from "axios"
import { useState, useEffect } from 'react'

const Art = () => {

    const [post, setPost] = useState({})

    function useQuery() {
        const { search } = useLocation();
        return React.useMemo(() => new URLSearchParams(search), [search]);
    }

    let query = useQuery();

    useEffect(() => {
        const token = localStorage.getItem("token")
        axios.get("myip.com").then(function (res) {

            console.log("debug")

            return setPost(res.data.cnt)
        })
    }, [])

    if (query.get("id")) {
        if (post.code == "403") {
            console.log("403")
            return (
                <div><p className='text-white'>not found</p></div>
            )
        } else {

            console.log(post)

            return (
                <div>
                    <div className='container mx-7 py-9'>
                        <img className='h-96 rounded-drawlie' src={"myip.com/" + post.postId + "/" + post.postId + "-normal.jpg"}></img>

                        <p className='text-white'>{post.description}</p>
                    </div>
                </div>
            )
        }
    }

    return (
        <Navigate to="/" />
    )

}

export default Art

Answer 1

在状态值可用之前，不要显示图像。例如：

<div className='container mx-7 py-9'>
  { post.postId ?
    <img className='h-96 rounded-drawlie' src={"myip.com/" + post.postId + "/" + post.postId + "-normal.jpg"}/> :
    null
  }
  <p className='text-white'>{post.description}</p>
</div>

只有当<img>包含一个值时，这才会有条件地将post.postId元素包含在标记中。

或者，您也可以将状态初始化为postId值，用于某些有意义的默认图像：

const [post, setPost] = useState({ postId: 1 });

基本上，对于初始呈现，要么显示已知的图像，要么不显示图像。

Answer 2

<img className='h-96 rounded-drawlie' src={post.postId ? "myip.com/" + post.postId + "/" + post.postId + "-normal.jpg" : "default.jpg"}></img>

默认情况下，可以使用占位符图像，例如加载gif。

Answer 3

最初，您的帖子是空对象，然后通过http请求填充post，这在本质上是async，因此您将得到undefined。

您可以在这里使用条件呈现，如下所示

{post.postId &&
        <div className='container mx-7 py-9'>
                    <img className='h-96 rounded-drawlie' src={"myip.com/" + post.postId + "/" + c + "-normal.jpg"}></img>

                    <p className='text-white'>{post.description}</p>
                </div>
      }