Question

这个问题涉及从本地文件收集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})
};

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

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

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

如果我想创建一个搜索功能并且能够通过数据库中的每个项目进行过滤怎么办？这个例子怎么样呢？

Answer 1

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

前：

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>
}

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

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

1 个答案: