Reactjs React.js过滤器并从本地JSON文件收集数据

这个问题涉及从本地文件收集JSON数据并执行多个状态更新

我使用

import database from./db.json'

在我的父组件（app.js）中收集json数据这是导入本地数据的正确方法吗

db.json

{
    "items": [
        {
            "key": 1,
            "name": "Item 1",
        },
        {
            "key": 2,
            "name": "Item 2",
        },
        ...

App.js

import React, { Component } from 'react';
import db from './db.json';

export default class App extends Component {
    ...
}

导入后，将数据库设置为状态

    this.state = {
        database: db,
        term: '',
    }; 

方法示例

onChange = (e) => {
    this.setState({term: e.target.value})
};

状态和方法作为道具传输到子组件（无状态）

我所有的方法都放在App.js中，并被传递给无状态组件，这是一个好的实践吗

---

如果我想创建一个搜索功能，并能够过滤数据库中的每个项目，那么这个示例如何显示呢？

您可以在渲染时直接过滤内容

例：

updateSearch（ev）{
this.setState（{searchString:ev.target.value}）；
}
render（）{
const filterData=this.state.searchString？this.state.database.filter（row=>row.someProperty.indexOf（this.state.searchString）>-1）：this.state.database；
this.updateSearch（ev）}/>
}

---

您甚至不必将数据库置于状态，因为它实际上在导入之后就保存在内存中。因此，实际上，您不必使用this.state.database进行过滤，而只需执行db.filter即可。在过滤时检查searchString是否实际设置也很好

.filter需要一个bool，因此您可以只返回>、<>=或任何您想要的运算符，而不是返回indexof

<Component onChange={this.onChange} stateOfDb={this.state.database} />

updateSearch(ev){
    this.setState({searchString: ev.target.value});
}
render(){
  const filterData = this.state.searchString ? this.state.database.filter(row => row.someProperty.indexOf(this.state.searchString) > -1) : this.state.database;

  <div>
    <input type="text" onChange={(ev) => this.updateSearch(ev)} />
    <ChildComponentToRenderData data={filteredData} />
  </div>
}