Question

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

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 ()，但有一个错误帖子，不是对象。

请帮助。我将非常感谢您。

谢谢

Answer 1

问题出在fetchPostByID代码中。您正在使用$validity = Validator::make($data, [ 'array', // 'between:2,4', this will include 3 too. but I need only 2 and 4. // 'in:2,4' something like this ]);来返回所有匹配项的数组（在回调中返回true）。 Array#filter仅会抓取匹配数组中的第一项。我相信这就是您想要的，因为您正在使用的帖子是一个对象而不是数组。

Array#find

Answer 2

<table class="table"> <tbody> <tr th:each="review : ${reviewsForMovie}"> <td th:hidden="${!review.isApproved}" th:utext="${review.text}"></td> </tr> </tbody> </table>返回一个数组，您将需要使用索引0，即

filter()

或dataGuru.filter(post => post.id == props.match.params.id)[0]，例如

find()

以获取单个dataGuru.find(post => post.id == props.match.params.id)，然后您将能够正确获取其name属性

Answer 3

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

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

如评论中所述，您将需要有post.experience [0] .name或year，并且过滤器确实会返回一个数组。

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）值，因为您看到它会显示检索直到加载值，这样在设置它之前不会出现渲染错误。

我希望这会有所帮助。

为什么无法读取对象？

3 个答案: