Как передать состояние в действие в React.js?

Question

У меня есть какое-то состояние в моем компоненте, которое я хочу передать действию в React.js. Как я могу это сделать?

mycomponent.js

cityHandleUpdateInput() { 
    this.setState({ 
     city: this.refs.city.refs.searchTextField.input.value 
    }) 
    const { city } = this.state; 
    this.props.fetchResCity(city) 
} 

myaction.js

export const fetchResCity = (city) => (dispatch, getState) => { 
if (!getState().resCity.isFetching) { 
    console.log(getState().city) 
    console.log(city) 
    const endpoint = 'rescity?city=${city}'; 
    dispatch({ 
     [CALL_API]: { 
      types: [ RES_CITY_REQUEST, RES_CITY_SUCCESS, RES_CITY_FAILURE ], 
      endpoint: endpoint 
     } 
    }) 
    } 
} 

Это не работает. Что-то не так в моем коде? Когда я регистрирую эту переменную города в своем действии, это всего лишь undefined.

Answer 1

Вы должны быть с помощью обратного вызова setState то есть правильный путь для обработки состояния мутаций, так как setState занимает много времени, чтобы мутировать и, следовательно, любое использование состояния сразу после обновления состояния может привести к более старому значению, а не обновленному значению.

Сделать использование обратного вызова, как

cityHandleUpdateInput() { 
    this.setState({ 
     city: this.refs.city.refs.searchTextField.input.value 
    },() => { 
     const { city } = this.state; 
     this.props.fetchResCity(city) 
    }) 
} 

Убедитесь, что вы зывать функцию cityHandleUpdateInput в constructor или откуда она вызывается или иначе он сам не сможет получить доступ к setState с this.setState

Answer 2

setState не будет немедленно обновляться this.state. Вот объяснение от React docs:

setState() не сразу мутировать this.state но создает отложенный переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы звонков на setState, и звонки могут быть отправлены для повышения производительности.

Это означает, что вам нужно будет сохранить значение, которое вы передаете, до setState, и передать это вашему создателю действия. Что-то вроде этого (я не запускаю этот код, убедитесь, что вы проверить его) должен работать:

cityHandleUpdateInput() { 
    const city = this.refs.city.refs.searchTextField.input.value; 
    this.setState({ city }); 
    this.props.fetchResCity(city); 
}