response componentdidupdate вызывает бесконечный цикл

Question

Я вызываю вызов API для поиска elastics с помощью onChange, чтобы я мог запросить список для автозаполнения. Чтобы убедиться, что мой магазин был обновлен до перерегистрации, я добавил componentDidMount, чтобы я не отставал. Но добраться до точки нужны коды, так:

constructor(props) { 
    super(props) 
    this.state = { 
    inputValue: '', 
    options: [] 
    }; 
    this.props = { 
    inputValue: '', 
    options: [] 
    }; 
    this._onChange = this._onChange.bind(this); 
} 

componentDidMount() { 
    CodeStore.addChangeListener(this._onChange); 
} 

_onChange(event) { 
    if (this.state.inputValue && !event) { 
    var enteredChars = this.state.inputValue; 
    console.log('NO EVENT!'); 
    } else if (event.target.value) { 
    console.log('EVENT!'); 
    var enteredChars = event.target.value; 
    this.setState({inputValue: enteredChars}); 
    } 
    CodeService.nextCode(enteredChars); 
} 

Как вы можете видеть, что я добавил некоторые события журнала просто чтобы убедиться, мое состояние делает правильно. Я читал о том, что setState провоцирует регент, так что он находится внутри условия, но это не остановило цикл. И консольный журнал подтверждает условие переключения. Но наличие setState внутри моего условия тормозит функциональность, и я не получаю список.

Вот мой журнал:

     0 
Home.jsx:48    EVENT! 
Home.jsx:50    0 
CodeService.js:27  request 
CodeActions.js:10  dispatch 
CodeStore.js:22   store 
Home.jsx:43    1 
Home.jsx:46    NO EVENT! 
10OptionTemplate.jsx:15 render-list 
CodeService.js:27  request 
CodeActions.js:10  dispatch 
CodeStore.js:22   store 
Home.jsx:43    1 
Home.jsx:46    NO EVENT! 
10OptionTemplate.jsx:15 render-list 
CodeService.js:27  request 
CodeActions.js:10  dispatch 
CodeStore.js:22   store 
Home.jsx:43    1 
Home.jsx:46    NO EVENT! 

Бесконечность цикл не повредит производительности, так или иначе. Я думаю, из-за componentWillUnmount, но следует избегать огромного количества вызовов API. Надеюсь, этого достаточно для каких-либо доказательств.

Answer 1

Похоже, бесконечный цикл вызывается следующая схема:

1. пользователя ввода
2. обновление _onChange состояние + пожары действий для хранения
3. Хранить обновлениям себя и отправить событие изменения
4. магазина change event fires same _onChange event
5. _onChange не обновляет состояние, но срабатывает, тем не менее, для сохранения
6. Goto шаг 3. и повторить (неопределенный)

шагов предпринять, чтобы исправить:

• делают различные обработчик изменений для пользовательского ввода и обновления хранилища (как уже было предложено @Janaka Stevens)
• данные о хранении в состоянии
• Пользовательский ввод не обязательно должен находиться в состоянии (если ваш код реакции не дает значения для поля ввода, он будет начинаться с пустого значения и оставить все, что набирается отдельно)

Тогда ваш код может выглядеть примерно так:

constructor(props) { 
    super(props) 
    this.state = { 
    options: [] 
    }; 
    // removed the this.props bit: props should not be updated inside component 
    this._onChangeUser = this._onChangeUser.bind(this); 
    this._onChangeStore = this._onChangeStore.bind(this); 
} 

componentDidMount() { 
    CodeStore.addChangeListener(this._onChange); // this is OK 
} 

_onChangeUser(event) { 
    console.log('EVENT!'); 
    var enteredChars = event.target.value; 
    CodeService.nextCode(enteredChars); 
    // No need to update state here - go to sleep until store changes 
} 

_onChangeStore() { 
    var newList = getListFromStore(); // your own function to get list from store 
    this.setState({ options: newList});   // update state here 
} 

Не уверен, что вы имели в виду «один тик за», или то, что могло бы вызвать его, но очистка бесконечный цикл является хорошим местом для начала;)

PS: Код выше только для эскиза, возможно, имеет опечатку.

Answer 2

Похоже, вы используете _onChange как для своего входного события, так и для прослушивания магазина. Им нужны отдельные методы.