开发者问题收集

为什么无法读取对象？

2020-04-05
71
javascript reactjs

我有如下的 React 代码，其中的对象无法在返回中显示。 

import React, { useState, useEffect } from 'react';


const dataGuru = [
    {
        id : 1,
        name : 'Andreas Ivan Jensen',
        instrument : "Drum",
        address : 'Yogyakarta',
        experience : [
            {
                name : 'Asian Beat 2011',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    },
    {
        id : 2,
        name : 'Deny AJD',
        instrument : "Drum",
        address : 'Jakarta',
        experience : [
            {
                name : 'Guru dari UI',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'

    },
]

const DetailPost = (props) =>{

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

    const fetchPostByID = () =>{

        const matchData = dataGuru.filter(post => post.id == props.match.params.id);
        setPost(matchData)

    }

    useEffect(()=>{

       fetchPostByID();

    },[])

    console.log(post)

    return(
        <div>
            { post.name }
        </div>
    )
}

export default DetailPost;

我是 React js 的初学者。我想问一下。我担心的是，为什么返回中的 {post.name 不可读？

并且帖子中的数据是这样的 

  {
        id : 1,
        name : 'Andreas Ivan Jensen',
        instrument : "Drum",
        address : 'Yogyakarta',
        experience : [
            {
                name : 'Asian Beat 2011',
                year : 2011,
            }
        ],
        photo : 'https://townsquare.media/site/366/files/2019/08/GettyImages-876067730.jpg?w=980&q=75',
        description : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }

我也使用地图 post.map () ，但出现错误帖子不是对象。

请帮忙。我将不胜感激。

谢谢

3个回答

问题出在 fetchPostByID 代码中。您使用的是 Array#filter ，它返回所有匹配项的数组（在回调中返回 true）。 Array#find 将仅抓取数组中匹配的第一个项。我相信这就是您想要的，因为您使用的帖子是一个要开始的对象，而不是数组。 

const fetchPostByID = () =>{

    const matchData = dataGuru.find(post => post.id == props.match.params.id);
    setPost(matchData)

}
Zachary Haber
2020-04-05

filter() 返回一个数组，您需要使用索引 0，即

dataGuru.filter(post => post.id == props.match.params.id)[0]

或 find() ，例如

dataGuru.find(post => post.id == props.match.params.id)

以便获取单个 post ，然后您将能够正确获取其 name 属性

andy mccullough
2020-04-05

我创建了一个示例来解释如何访问您的值：

https://codesandbox.io/s/adoring-allen-g2gm7

正如评论中提到的，您将需要有 post.experience[0].name 或 year，并且 filter 确实返回一个数组。 

return(
      <div>
        <p>name: {post === null ? 'retrieving...': post[0].name }</p>
        <p>instrument: { post === null ? 'retrieving...':post[0].instrument }</p>
        <p>address: { post === null ? 'retrieving...':post[0].address }</p>
        <p>experience name: { post === null ? 'retrieving...':post[0].experience[0].name}</p>
        <p>experience year: { post === null ? 'retrieving...':post[0].experience[0].year}</p>
        <p>photo url: { post === null ? 'retrieving...':post[0].photo }</p>
        <p>description: { post === null ? 'retrieving...':post[0].description }</p>

      </div>
    )

我添加了 useState(null) 值，如您所见，它将显示检索，直到值加载完毕，因此在设置之前不会出现呈现帖子的错误。

我希望这会有所帮助。

DcoderZ
2020-04-05