通过 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;