Почему зависает инпут на dispatch, react/rtedux?

Question

[ch-aqwer]

Добрый день! Скажите пожалуйста почему зависает инпут при изменении когда делаю dispatch ?
Есть компонент инпут в который передаю на change функцию dispatch,
и вот данные появляются быстрее в редюсере чем в инпуте, соответственно инпут зависает.
Почему так и как это исправить?

carFiltering = (event, text) => {
//dispatch
			this.props.filterCars(text);
	};
render() {
		return (

	<TextField hintText="Find Your car..." onChange={this.carFiltering}/>
)}

Спасибо!

Comments

[Ilya]

может слишком большое количество данных фильтруется? тем более делай через дебаунс лучше

[ch-aqwer]

Ilya, дебаунс уже в редюсере?
даже когда я в редюсере вывожу просто текст, ничего не фильтрую - все равно зависает.

[Роман Александрович]

ch-aqwer,

<TextField hintText="Find Your car..." onChange={()=>this.carFiltering()}/>

папробуйте так

[ch-aqwer]

Роман Александрович, так не работает

[Роман Александрович]

ch-aqwer, у вас bind есть в конструктере?

[davidnum95]

Роман Александрович, там bind не нужен

[Роман Александрович]

davidnum95, покажите ваш action и reduser

[Роман Александрович]

davidnum95, еще хотелось бы увидеть компонент в котором вы используете input

[ch-aqwer]

Роман Александрович,

//Action
export const filterCars = (text) => ({
	type: types.CAR_FILTER,
	text
});

// Reducer

const fetchDataReducer = (state = initState, action) => {
	switch (action.type) {
		case FETCH_REQUEST:
			return state;
		case FETCH_SUCCESS:
			return {
				...state,
				companyData: action.company_list,
				loaded: true,
			};
		case FETCH_INTERVAL_SUCCESS:
			return {
				...state,
				companyData: mergeData(state.companyData, action.company_list),
				loaded: true
			};
		case FETCH_ERROR:
			return {
				...state,
				companyData: action.payload,
				loaded: true
			};
		case CAR_FILTER:
		 console.log('CAR_FILTER', action);
			return {
				...state,
				// companyData: state.companyData.filter(item => item.n ),
			};
		default:
			return state
	}
};

// Parent component
// может проблема здесь? так как сейчас я пока ничего не фильтрую
const mapStateToProps = (state) => {
	return {
		selectedCompany: state.selectedCompanyReducer,
	}
};
const mapDispatchToProps = (dispatch) => {
	return {
		selectCompany: bindActionCreators(selectCompany, dispatch),
		filterCars: bindActionCreators(filterCars, dispatch)
	}
};

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)

Answer 1

[davidnum95]

В каком смысле зависает?

и вот данные появляются быстрее в редюсере чем в инпуте

так и должно быть.
А вы не забыли текст из стейта передать обратно в инпут?

Comments

[ch-aqwer]

Что вы имеете в виду?
setState c сделать?

arFiltering = (event, text) => {
		this.setState({
			filterText: text
		})

		this.props.filterCars(text);
	};

<TextField hintText="Find Your car..." onChange={this.carFiltering} value={this.state.filterText}/>

[davidnum95]

ch-aqwer, выложите полный код компонента, а то по кускам кода не понятно что вы пытаетесь сделать

[ch-aqwer]

davidnum95,

import React, {Component} from 'react';

import TableCarList from './TableCarList'
import TextField from 'material-ui/TextField';

const iconStyles = {
	marginRight: 5,
	width: 20,
	height: 20
	// height: `10px`,
};


export default class SelectAutoComplete extends Component {
	constructor(props) {
		super(props);
		this.state = {
			filterText: ''
		}
	}


	carFiltering = (event, text) => {
		// this.props.filterCars(text);
		this.setState({
			filterText: text
		})

		this.props.filterCars(text);
	};

	render() {
		const dataSourceConfig = {
			text: 'text',
			value: 'id',
		};
		return (

			<div>
	
				<TextField hintText="Find Your car..." onChange={this.carFiltering} value={this.state.filterText}/>

				<TableCarList options={this.props.selectedCompany.carList} data={this.props.company.companyData}/>
			</div>
		);
	}
}