搜索React / Redux

Question

我对Reac.js / Redux.js和javascript真的很陌生。我正在尝试通过实际学习来学习一种新语言。我正在尝试构建一个简单的应用程序，让您搜索产品。最终，我将创建其他功能，使用户可以添加和删除产品列表中的项目。

到目前为止，我已经构建了两个容器：ListOfProd和Search。一切正常，除了我无法弄清楚如何根据用户输入的搜索条件过滤产品列表。实施过滤器的最佳位置在哪里？以及根据搜索条件过滤对象数组的最佳方法是什么？请让我知道如何改善我的代码！

容器Search.js

html.Button

容器ListOfProd.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);



 	

动作

// 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);

Reducer ReducerSearch.js

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

App.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;
	}
	
	}

请让我知道是否需要查看我的组件。

Answer 1

通常，实现过滤的最佳方法是在文本框中按下事件。

但是在此之前，您必须检查数据源并考虑性能，可以设置关键限制或其他限制。

关于第二个问题，我应该说，如果您的数组在客户端中，则使用map以获得最佳性能，但是必须从服务器上获取它，您可以做很多事情