反应嵌套的json对象错误认为它是对象答案

【问题标题】：React nested json object error thiks it is object反应嵌套的json对象错误认为它是对象
【发布时间】：2020-08-31 13:29:16
【问题描述】：

我有一个有趣的错误。在这里，我有一个带有 axios 的反应文件，它从我的帖子中获取数据，即使它适用于显示我在一个页面中发布所有帖子的所有帖子，我也有问题，我试图找到解决方案但找不到。

这是我的反应代码

const [post, setPost] = useState([]);
var id = match.params.id;
useEffect(() => {
    axios.get('http://localhost:3001/post/' + id).then(res => {
        setPost(res.data);
    }).catch(err => {
        console.log(err);
    })
}, []);

return (
    <div >
        <div className="blogcontainer">
            <img src={post.images.destination + post.images.filename} alt={post.name} />
            <div className="articleWrapper">
                <h2>{post.name}</h2>
                {parse(String(post.postcontent))}
            </div>
        </div>
    </div>

)

它需要的数据是：

data: {…}

__v: 0

_id: "5f4adaa46bde7743b4254615"

createdAt: "2020-08-29T22:45:56.894Z"

description: "At first write an introduction without pushing enter until complete introduction..."

images: {…}

destination: "uploads/"

encoding: "7bit"

fieldname: "mainImage"

filename: "1598741156885.jpg"

mimetype: "image/png"

originalname: "iguda_logo.png"

path: "uploads\\1598741156885.jpg"

size: 758685

<prototype>: Object { … }

name: "fdhfgh"

postcontent: "<p>At first write an introduction without pushing enter until complete introduction</p>"

这是错误：

TypeError: post.images is undefined
BlogArticle
C:/Users/arsla/OneDrive/Documents/GitHub/inc-web/client/src/component/BlogArticle.jsx:23

  20 | return (
  21 |     <div >
  22 |         <div className="blogcontainer">
> 23 |             <img src={post.images.destination + post.images.filename} alt={post.name} />
     | ^  24 |             <div className="articleWrapper">
  25 |                 <h2>{post.name}</h2>
  26 |                 {parse(String(post.postcontent))}

谢谢。

【问题讨论】：

标签： javascript reactjs express axios

【解决方案1】：

一旦你渲染了组件，你的 return 就会被调用。该解决方案有几种解决方案

如果没有数据就不要渲染组件

const [post, setPost] = useState([]);
var id = match.params.id;
useEffect(() => {
   axios.get('http://localhost:3001/post/' + id).then(res => {
       setPost(res.data);
   }).catch(err => {
       console.log(err);
   })
}, []);
if(!post.images){
return
}
return (
   <div >
       <div className="blogcontainer">
           <img src={post.images.destination + post.images.filename} alt={post.name} />
           <div className="articleWrapper">
               <h2>{post.name}</h2>
               {parse(String(post.postcontent))}
           </div>
       </div>
   </div>

)

如果您想要渲染除 img 之外的所有内容，请在 img 中添加内联检查

<img src={post.images?.destination + post.images?.filename} alt={post.name} />

【讨论】：

我的数据是问题所在
你试过这个<img src={post.images?.destination + post.images?.filename} alt={post.name} />
是的，我试过但没有任何输出，因为它没有看到输出，但如果你查看我的 json 数据，它就在那里
你能分享你在 API 响应中得到的确切 json 吗？

【解决方案2】：

在第一次渲染时，您的状态将为空，因此实际上所有属性都未定义。您需要先检查一下，然后在 axios 获取数据时渲染一个微调器或空 div。

您可以使用三元运算符来执行此操作。如果您只处理一个帖子，不确定为什么要使用空数组初始化您的状态，但如果它是一个数组，您检查post.length，如果它是一个对象或其他任何东西，您可以检查!post

const [post, setPost] = useState([]);
var id = match.params.id;
useEffect(() => {
    axios.get('http://localhost:3001/post/' + id).then(res => {
        setPost(res.data);
    }).catch(err => {
        console.log(err);
    })
}, []);

return (

    <div >
        <div className="blogcontainer">
            {post.length < 1 ? <div /> : 
                <img src={post.images.destination + post.images.filename} alt={post.name} />
                <div className="articleWrapper">
                    <h2>{post.name}</h2>
                    {parse(String(post.postcontent))}
                </div>
            }
        </div>
    </div>


)```

【讨论】：