Javascript 使用Json响应上下文Api

我有嵌套的json和位于其中的数组。所以我想做的就是这样。我想做一个搜索功能，该“功能”将遍历数组，并基于特定Id显示数组中特定对象的名称。我曾尝试使用上下文api全局共享状态，我知道这不是最干净的方式，无论如何，它在FreeToPlayComponent中给了我一个错误。“filter不是一个函数”

上下文
从“React”导入React，{useState，useContext}；
export const SearchContext=React.createContext（null）
导出默认函数SearchProvider（{children}）{
常量[searchValue，setSearchValue]=React.useState（“”）；
功能过滤器产品（产品）{
返回product.name.toLowerCase（）.includes（searchValue.toLowerCase（））；
}
报税表（
{儿童}
); }
json
[
{
“freetoplay”：[{
“id”：“0”，
“图像”：“src=fsdf”，
“价格”：“60美元”，
“名称”：“CS Go”
},
{
“id”：“1”，
“图像”：“src=fsdf”，
“价格”：“6美元”，
“名称”：“国际足联”
}
],
“行动”：[{
“id”：“2”，
“图像”：“src=fsdf”，
“价格”：“60美元”，
“名称”：“厄运”
},
{
“id”：“3”，
“图像”：“src=fsdf”，
“价格”：“66美元”，
“名称”：“赛博朋克”
}
],
“冒险”：[
{
“id”：“4”，
“图像”：“src=fsdf”，
“价格”：“60美元”，
“姓名”：“印第安纳”
},
{
“id”：“5”，
“图像”：“src=fsdf”，
“价格”：“43美元”，
“名称”：“火炬灯”
}
]
}
]
搜索组件
从“React”导入React
导入“./Search.css”
从“./SearchContext”导入{SearchContext}；
函数搜索（）{
const{searchValue，setSearchValue}=React.useContext（SearchContext）；
返回(
setSearchValue（e.target.value）}
type='text'
占位符='Search'/>
)
}
导出默认搜索
从“React”导入React
从“./头”导入头
导入“/App.css”；
从“/SlideShow”导入幻灯片放映；
从“./Routes”导入路由；
从“/data.json”导入数据；
从“/SearchContext”导入SearchProvider；
函数App（）{
返回(
);
}
导出默认应用程序；
从“React”导入React
从“/data.json”导入数据；
进口{
链接
}从“反应路由器dom”；
从“./SearchContext”导入{SearchContext}；
函数FreeToPlay（）{
const{filterProduct}=React.useContext（SearchContext）；
返回(
{data[0].filter（filterProduct）.freetoplay.map（（product）=>{
返回(
{product.name}
{产品价格}
立即购买
);
})}
);
}
导出默认FreeToPlay

您的JSON数据似乎无效，在“action”键之前有一个多余的左括号

json

似乎您还应该过滤类别/产品数组，而不是类别/产品的外部数组，因为类别/产品元素具有“name”属性

改变

data[0].filter(filterProduct).freetoplay.map

到

[
  {
    "freetoplay": [{
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "CS Go"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "Fifa"
      }
    ],
    { // <-- remove this!!
    "action": [{
        "id": "2",
        "image": "src=fsdf",
        "price": "60$",
        "name": "doom"
      },
      {
        "id": "3",
        "image": "src=fsdf",
        "price": "66$",
        "name": "cyberpunk"
      }
    ],
    "adventure": [
      {
        "id": "4",
        "image": "src=fsdf",
        "price": "60$",
        "name": "indiana "
      },
      {
        "id": "5",
        "image": "src=fsdf",
        "price": "43$",
        "name": "torchlight"
      }
    ]
  }
]

function filterProduct(product) {
  return product.name.toLowerCase().includes(searchValue.toLowerCase());
}

data[0].filter(filterProduct).freetoplay.map

data[0].freetoplay.filter(filterProduct).map