使用 Json 反应上下文 Api

Question

我嵌套了位于其中的 json 和 arrays 。 所以我想做的就是这个。 我想创建一个搜索功能，该“功能”将 go 通过 arrays 并基于特定的 ID，它将在数组中显示该特定 object 的名称。 我已经尝试使用 Context api 在全球范围内共享 state，我知道这不是最干净的方法，无论如何它在 FreeToPlayComponent “.filter 不是函数”中给我一个错误。

Context 
import React, { useState, useContext } from 'react';

export const SearchContext =React.createContext(null)
export  default function SearchProvider({children}) {

const [searchValue, setSearchValue] = React.useState("");
    
     function filterProduct(product) {
     return product.name.toLowerCase().includes(searchValue.toLowerCase());
     }

      return( 

       <SearchContext.Provider value ={{filterProduct, searchValue, setSearchValue}}>
             {children} 
        </SearchContext.Provider> 
             
             ); }

json

[
  {
    "freetoplay": [{
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "CS Go"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "Fifa"
      }
    ],
    
      "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"
        }
      ]
    }
  ]


Search Component
import React from 'react'
import './Search.css'
import { SearchContext } from './SearchContext';

function Search() {

    const {searchValue, setSearchValue}=React.useContext(SearchContext); 
    return (
        <div className='search'>
            <form className="search__Form">
            <input className="search__Input" type="text"
            value ={searchValue} 
            onChange={(e) => setSearchValue(e.target.value)}
            type='text'
            placeholder='Search '/>
            </form>
        </div>
    )
}

export default Search

import React from 'react'
import Header from './Header'
import './App.css';
import SlideShow from './SlideShow';
import Routes from './Routes';
import data from "./data.json";
import SearchProvider from "./SearchContext";

function App() {
  
  return (
    <div className="app">
    <SearchProvider>
      <Header />
      <SlideShow />    
      <Routes  />
    </SearchProvider>    
    </div>
  );
}

export default App;

import React from 'react'
import data from "./data.json";
import {
    
    Link
  } from "react-router-dom";
import { SearchContext } from './SearchContext';


function FreeToPlay() {
  const {filterProduct}=React.useContext(SearchContext);
    return (
        <>
          <div className='All' >
            {data[0].filter(filterProduct).freetoplay.map((product) => {
              return (
                <div className='f2p' key={product.id}>               
                    <img src={product.image}></img>
                    <h2>{product.name}</h2>
                    <h5>{product.price}</h5>
                  <Link
            to={`/payment/${product.id}`}
            className='link'
           >
            Buy Now
           </Link>
        </div>
              );
            })}
          </div>
        </>
      );
}

export default FreeToPlay

Answer 1

您的 JSON 数据似乎无效，它在“操作”键之前有一个无关的左大括号。

json

[
  {
    "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"
      }
    ]
  }
]

此外，根据数据形状和您的filterProduct function 所做的

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

似乎您还应该过滤类别/产品数组与类别/产品的外部数组，因为类别/产品元素具有“名称”属性。

改变

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

至

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