@pomaz_andrew

Как устранить ошибку Uncaught TypeError: _this.props.change is not a function в проекте React-Redux?

Всем доброго времени суток! Делаю небольшой проект на React+Redux. Привожу код компонента.
class Container extends Component {
  constructor(props) {
    super(props);
  }
  handleChange = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
    this.props.change(suggestionValue);
  }
  render() {
    return (
       <Provider store={store}>
         <form >
           <IntegrationAutosuggest label="Станция отправления" onSelected={this.handleChange} />
         </form>
       </Provider>
     );
  }
}
const mapStateToProps = (state) => {
  return {
    out: state.out,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    change: (dispatch) => dispatch(changeOutStation(dispatch))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Container);
export const store = createStore(combineReducers(reducers));
ReactDOM.render(<Container />, document.getElementById("params"));
export { Container };

Код action
export const changeOutStation = (station) => ({
  type: 'CHANGE_OUT_STATION', station
});

Выкидывает ошибку при заполнении компонента IntegrationAutosuggest
Uncaught TypeError: _this.props.change is not a function.
В реакте опыта мало. Что я делаю неправильно ?
  • Вопрос задан
  • 1832 просмотра
Решения вопроса 2
@NepeinAndrey
Проблема в том, что на вход в функцию ReactDOM.render вы даёте сам компонент Container, в который не передаются никакие параметры, в частности change. Параметр change появляется только после выполнения connect для этого компонента, следовательно и в ReactDOM.render нужно передавать то, что возвращает вышеупомянутый connect.
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Как вариант решения, перенести Provider выше по древу:
const ConnectedContainer =  connect(mapStateToProps, mapDispatchToProps)(Container);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedContainer />
  </Provider>,
  document.getElementById("params"),
);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
summer Ярославль
от 100 000 до 140 000 ₽
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект