Javascript 通过UI过滤JSON对象数组

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

我以前将数组存储在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;

从“React”导入React；
导入“/App.css”；
从“/components/DogsList.js”导入DogsList；
函数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 DogSearchBox(postDetail){
  return (
    <div>
     <input onChange={postDetail.handleInput} type ='text'/>
    </div>
  )
}

export default DogSearchBox;

import React，{Component}来自'React'；
从“/listlayouts.js”导入狗；
函数狗列表（postDetail）{
let dogs=postDetail.filteredDogs.map（（dog，i）=>{
返回
})
返回(
{狗}
)
};
导出默认狗列表；

列表布局：

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}来自'React'；
功能狗（postDetail）{
返回(
名称：{postdail.title}

内容：{postdail.Content}

)
}
导出默认狗；

搜索框功能：

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 DogSearchBox(postDetail){
  return (
    <div>
     <input onChange={postDetail.handleInput} type ='text'/>
    </div>
  )
}

export default DogSearchBox;

import React，{Component}来自'React'；
功能搜索框（postDetail）{
返回(
)
}
导出默认搜索框；

以及狗列表组件，该组件应在所有狗的列表上方显示一个空搜索栏，然后一旦用户在搜索栏中键入，该列表应更改

import React, {Component} from 'react';
import DogList from './listfunctions.js';
import DogSearchBox from './searchboxfunctions.js';
import postData from './dogs.json';


class DogsList extends Component {
  constructor(props){
    super(props);
    this.state = {
      dogs: [
        <div>
          {postData.map((postDetail, index) => {
            return(
              <div>
               <h2>{postDetail.title}</h2>
               <p>{postDetail.content}</p>
              </div>
            )
          })}

         </div>
      ],
      searchDog:''
    }
  }

  handleInput = (e) => {
    this.setState({searchDog: e.target.value})
  }

  render() {

    let filteredDogs = this.state.dogs.filter(dog => 
    Object.values(dog).some(val => 
    val.toString().toLowerCase().includes
    (this.state.searchDog.toLowerCase())))

    return (
     <div>
      <header>
      <h1>Dogs</h1>
      </header>
      <div>
      <DogSearchBox handleInput = {this.handleInput}/>
      <DogList filteredDogs = {filteredDogs}/>
     </div>
     </div>
    );
  }
}

export default DogsList;

import React，{Component}来自'React'；
从“/listfunctions.js”导入DogList；
从“./searchboxfunctions.js”导入DogSearchBox；
从“/dogs.json”导入postData；
类DogsList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
狗：[
{postData.map（（postdail，index）=>{
返回(
{postDetail.title}
{postdail.content}

)
})}
],
搜索狗：“”
}
}
handleInput=（e）=>{
this.setState（{searchDog:e.target.value}）
}
render（）{
让filteredDogs=this.state.dogs.filter（dog=>
Object.values（dog.some）（val=>
val.toString（）.toLowerCase（）.包括
（this.state.searchDog.toLowerCase（）））
返回(
狗
);
}
}
导出默认DogsList；

---

我仍然是新手，但我有一种感觉，我将不再需要所有这些组件。我非常乐意尽可能地简化它。只要它能按预期工作。

在列表组件中，如果您将不正确的道具传递给

狗

组件，请尝试将其更改为：

function DogList(filteredDogs){
  let dogs = filteredDogs.map((dog) => {
    return <Dog key={dog.id} dog={dog} />
   })
  return(
     <div>
      {dogs}
     </div>
     )
  };

---

您的问题是您正在您的状态中定义JSX元素。然后尝试将其转换为字符串

class DogsList extends Component {
  constructor(props){
    super(props);
    this.state = {
      dogs: [
        <div>
  // -----^--------------
          {postData.map((postDetail, index) => {
            return(
              <div>
               <h2>{postDetail.title}</h2>
               <p>{postDetail.content}</p>
              </div>
            )
          })}

         </div>
  // -------^--------------
      ],
      searchDog:''
    }
  }

class DogsList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
狗：[
// -----^--------------
{postData.map（（postdail，index）=>{
返回(
{postDetail.title}
{postdail.content}

)
})}
// -------^--------------
],
搜索狗：“”
}
}

相反，您应该只在状态中存储数据，在渲染期间创建元素

class DogsList extends Component {
  constructor(props){
    super(props);
    this.state = {
      dogs: [...postData],
      searchDog:''
    }
  }
  render() {
    const filteredDogs = ...
    return <div>
      <DogList dogs={filteredDogs} />
    </div>
  }
}

class DogsList扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
狗：[…postData]，
搜索狗：“”
}
}
render（）{
常量筛选器地址=。。。
返回
}
}

然后修复将错误的道具传递给狗组件的问题

function DogList({dogs){
  let elems = dogs.map((dog, i) => {
    return <Dog key={dog.id} {...dog} />
  })

  return(
    <div>
      {elems}
    </div>
  )
};

功能狗列表（{dogs）{
让elems=dogs.map（（dog，i）=>{
返回
})
返回(
{elems}
)
};

Hello当您在

DogList

函数中映射json数据时，postDetail的值是多少？您可以通过控制台记录该值吗？当您想要搜索时，得到的错误消息是什么？“当我在搜索栏中键入时，我得到一条错误消息。”TypeError:无法读取null（匿名函数）的属性“toString”C:/Users/corey/Desktop/said1/src/components/dogslist.js:34 31 | 32 | render（）{33 |>34 | let filteredDogs=this.state.dogs.filter（dog=>Object.values（dog）.some（^35 | val=>val.toString（）.toLowerCase（）。包括（this.state.searchDog.toLowerCase（）））36 | 37 |返回（您传递的道具与您尝试使用的道具不同。

为什么您的状态中有jsx？在
DogsList
中，您使用jsx定义状态。感谢John，但是我以前确实将数据存储在状态中，但由于我最终想要拥有数千个对象，我认为数组将变得太长和混乱。（每个对象将有更多的道具和图像）。因此，我想将数据存储为JSON，因为我认为这将使我的代码更整洁。然后实现分页，或无限加载。像Redux这样的状态管理系统可能无法解决问题，因为子组件中传递了不正确的道具。啊，好的，明白了：）好的，你应该有条件地呈现它。
{hasFacebookUrl？：null}
谢谢澄清，我现在得到了这个错误。filteredDogs.map不是函数6 |函数DogList（filteredDogs）{>7 | let dogs=filteredDogs.map（（dog）=>{8 | return 9 |}）10 | return（你能在let dogs=filteredDogs.map（（dog）=>{之前控制台.log（filteredDogs）吗？