搜索React / Redux

Question

我真的是Reac.js / Redux.js和javascript的新手。 我正在嘗試通過實際學習來學習一種新語言。 我正在嘗試構建一個簡單的應用程序，讓您搜索產品。 最終，我將創建其他功能，使用戶可以添加和刪除產品列表中的項目。

到目前為止，我已經建立了兩個容器：ListOfProd和Search。 一切正常，除了我無法弄清楚如何根據用戶輸入的搜索條件過濾產品列表。 實施過濾器的最佳位置在哪里？ 以及根據搜索條件過濾對象數組的最佳方法是什么？ 請讓我知道如何改善我的代碼！

容器Search.js

 import React, {Component} from 'react'; import {bindActionCreator} from 'redux'; import {connect} from 'react-redux'; //import scroll for search //import Scroll from './components/Search/Scroll'; import SearchBox from '../components/Search/SearchBox'; //import action for search import {setSearchField} from '../actions/actionSearch'; //list of prod import ListOfProd from './ListOfProd'; const mapStateToProps = state =>{ return{ product: state.product, searchField: state.searchField } } const mapDispatchToProps = (dispatch) => { return{ onSearchChange: (event) => dispatch(setSearchField(event.target.value)) } } class Search extends React.Component{ render(){ const {searchField, onSearchChange} = this.props; // const filterProduct = this.props.product.filter(product =>{ // return product.prod.includes(searchField); // }) return( <div className = 'tc'> <SearchBox searchChange={onSearchChange}></SearchBox> <ListOfProd></ListOfProd> </div> ) } } export default connect(mapStateToProps, mapDispatchToProps)(Search); 

容器ListOfProd.js

 // import Component // hook it up to data store import React, {Component} from 'react'; import {bindActionCreator} from 'redux'; import {connect} from 'react-redux'; //import Search from 'Search'; class ListOfProd extends React.Component { createListItems(){ console.log(this.props.product); return this.props.product.map((product, i) => { console.log(this.props.product.prod); console.log(this.props.searchField); return( <li key={i}>{product.prod} {product.price}</li> ) }); } render(){ return( <ul> {this.createListItems()} </ul> ) } } const mapStateToProps = state =>{ return{ product: state.searchProd.product, searchField: state.searchProd.searchField } } export default connect(mapStateToProps)(ListOfProd); 

操作

 import {CHANGE_SEARCH_FIELD} from '../constants/constants'; export const setSearchField = (text) => ({ type: CHANGE_SEARCH_FIELD, payload: text }) 

減速機ReducerSearch.js

 import {CHANGE_SEARCH_FIELD} from '../constants/constants'; import React from 'react'; const initialState = { searchField: '', product : [ { id: 1, prod: "prod1", price: "5" }, { id:2, prod: "prod2", price: "5" } ] } export const searchProd = (state = initialState, action={}) =>{ console.log(action.payload); console.log(action.type); switch(action.type){ case CHANGE_SEARCH_FIELD:{ console.log(action.payload); console.log(state.product); return {...state, searchField: action.payload};} default: return state; } } 

App.js

 import React, { Component } from 'react'; import SignIn from './components/SignIn/SignIn'; import Register from './components/Register/Register'; import ListOfProd from './containers/ListOfProd'; import Search from './containers/Search'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Search></Search> </div> ); } } export default App; 

請讓我知道是否需要查看我的組件。

Answer 1

通常，實現過濾的最佳方法是在文本框上的按下事件。

但是在此之前，您必須檢查數據源並考慮性能，可以設置關鍵限制或其他限制。

對於第二個問題，我應該說，如果您的陣列在客戶端中，則使用map以獲得最佳性能，但是必須從服務器上獲取它，您可以做很多事情