通过 UI 过滤一组 JSON 对象

Question

我想显示一个带有搜索栏的狗列表，输入时只会显示符合条件的狗。

我以前将数组存储在 state 中，并且一切正常。但是现在，期待一旦启动并运行，我将在数组内有数千个条目，它会变得太混乱。所以我决定我希望以 JSON 格式存储我的所有对象，因为我相信它会更容易管理。

我被卡住了，我试图将 .json 文件集成到旧格式中，但我没有得到任何数据，当我在搜索栏中输入时，我收到一条错误消息。

这是我的 json：

[

 {

  "id": 3,

  "title": "Sir",

  "content":"My name is Sir Jeffrey"

 },

 {

  "id": 4,

  "title": "Prince",

  "content": "My name is Prince Gareth"

 },

 {

  "id": 5,

  "title": "Princess",

  "content": "My name is Princess Roy Roy"

},

{

 "id": 6,

 "title": "King",

 "content": "My name is King George"

}

]

我的 App.js：

import React from 'react';

import './App.css';

import DogsList from './components/dogslist.js';

function App() {

  return (

    <div className="App">

     <DogsList/>

    </div>

  );

}

export default App;

我的列表功能：

import React, {Component} from 'react';

import Dog from './listlayouts.js';

 function DogList(postDetail){

  let dogs = postDetail.filteredDogs.map((dog, i) => {

    return <Dog key={postDetail.id} Name={postDetail.title} Content= 

   {postDetail.content}/>

   })

  return(

  <div>

    {dogs}

  </div>

  )

 };

 export default DogList;

列表布局：

import React, {Component} from 'react';

function Dog(postDetail){

  return(

    <div>

    <p>Name: {postDetail.title}</p>

    <p>Content: {postDetail.content}</p>

    </div>

  )

 }

export default Dog;

搜索框功能：

import React, {Component} from 'react';

function DogSearchBox(postDetail){

  return (

    <div>

     <input onChange={postDetail.handleInput} type ='text'/>

    </div>

  )

}

export default DogSearchBox;