从reactjs中的json数组中选择一个项目答案

【问题标题】：select a single item from json array in reactjs从reactjs中的json数组中选择一个项目
【发布时间】：2021-01-03 10:12:57
【问题描述】：

我有以下 json 文件，

[
    {
        "id" : 7,
        "intro": "intro_7"
       
    },
    {
        "id" : 8,
        "intro": "intro_8"
    }
]

然后我试图从上面的 json 文件中过滤一个对象，那就是我正在尝试以下方式。

import React,{ useState, useEffect} from 'react';
import source_data from '../source/data.json';

function CardIntro(props){

    let {selectedItem} = source_data.find(item => item.id == 8);

    return(

            <div> Card Intro  </div>
            <div>{selectedItem.intro}</div>

    )
}

export default CardIntro;

我收到以下错误，这里缺少什么

TypeError: 无法读取未定义的属性“intro”

我尝试使用 .filter 也不成功

【问题讨论】：

找到返回的对象，即{id:8,intro:"intro_8"}

标签： arrays json reactjs

【解决方案1】：

您的数组对象中没有selectedItem 属性，这是您的代码试图对对象destructuring syntax 执行的操作。您可能不想要解构语法。做吧：

let selectedItem = source_data.find(item => item.id === 8);

请注意，您还应该将== 更改为===。有关严格相等比较的更多信息，here。另请记住，如果 find 没有产生任何结果，您的代码将无法工作。您可能需要对此进行检查。

【讨论】：