javascript - 为什么不能读取对象？

Question

我有如下 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.'
    }

我也用 map post.map ()但是有一个错误帖子不是一个对象。

请帮忙。我会很感激你的。

谢谢

Answer 1

问题在于 fetchPostByID 代码。您正在使用 Array#filter它返回所有匹配项的数组(在回调中返回 true)。 Array#find只会抓取数组中匹配的第一项。我相信这就是您想要的，因为您使用的帖子是要启动的对象而不是数组。

const fetchPostByID = () =>{

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

}