React.jsフィルタとローカルJSONファイルからのデータの収集

Question

この質問は、ローカルファイルからJSONデータを収集し、複数の状態更新を行うことに関するものです。

Im 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に配置され、ステートレスコンポーネントに受け継がれている（ステートレス）子コンポーネントへの小道具として、国家とメソッド転送

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

、これは良い習慣ですか？

検索機能を作成し、データベース内の各項目をフィルタリングできるようにするにはどうすればよいでしょうか？

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

あなたはそれが実際には、単にインポートした後、メモリに保持されるためにも、状態のデータベースを入れて持っていけません。したがって、実際には、this.state.databaseを使用してフィルタリングする代わりに、実際にdb.filterを実行できます。おそらく、フィルタリング時にsearchStringが実際に設定されているかどうかを確認することもできます。