редукция без реакции не работает Будет отображаться новая страница, но не будет отображаться с новым состоянием / реквизитом

Question

Функция handleSubmitSearch вызывает thunk (который вызывает вызов выборки), который будет отображаться на новой странице. Эта функция работает без маршрутизатора, но при использовании маршрутизатора handleSubmitSearch даже никогда не вызывается (журнал консоли не запускается и не вызывает вызовов fetch). Я также попытался использовать многочисленные методы жизненного цикла, такие как componentenetWillUpdate, componentShouldUpdate, componentwillreceiveprops и т. Д. Я также попытался установить модуль npm для подключенного реагирующего маршрутизатора, который не устранил проблему.

Я часами гуглял эту проблему и не могу понять, почему ни одно из моих исправлений не работает.

export class SearchDirections extends React {
  constructor() {
    super()
    this.state = {
      origin: '',
      departure: '',
      mode: ''
    }
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  };

  handleRadioChange = (e) => {
  this.setState({
    mode: e.target.value
  });
}

  handleSubmitSearch = async (e) => {
    e.preventDefault();
    console.log('test')
    await this.props.getNewDirections(this.state.origin, this.state.departure, this.state.mode)
    if(this.props.direction) {
    let startCoordinates = this.props.directions.routes[0].legs[0].start_location 
    let endCoordinates = this.props.directions.routes[0].legs[0].end_location
    await this.props.displayWeatherStart(startCoordinates)
  }
  };

  render() {
    return (
      <form
        onSubmit={this.handleSubmitSearch}>
        <input
        placeholder='enter origin' 
        className='origin'
        name='origin' 
        value={this.state.origin}
        onChange={(e) => this.handleChange(e)}
        />
        <input 
        placeholder='enter departure' 
        className='departure'
        name='departure' 
        value={this.state.departure}
        onChange={(e) => this.handleChange(e)}       
        />
      <Link to='/directions'> 
       <button className='submit-btn'>submit</button>
       </Link>
        <ul>
          <li>
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='transit' 
              name='radio' 
              checked={this.state.mode === 'transit'}
              onChange={this.handleRadioChange}
              />
              transit
           </label>
          </li>
          <li>
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='walking' 
              name='radio'
              checked={this.state.mode === 'walking'}
              onChange={this.handleRadioChange}
            />
              walking
            </label>
          </li>
          <li>  
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='bicycling' 
              name='radio'
              checked={this.state.mode === 'bicycling'}
              onChange={this.handleRadioChange}
              />
              bicycling
            </label>
          </li> 
          <li> 
            <label>
              <input 
              className='radio'
              type='checkbox'  
              value='driving' 
              name='radio'
              checked={this.state.mode === 'driving'}
              onChange={this.handleRadioChange}
              />
              driving
            </label>
          </li>
        </ul>

      </form>
    )
  }
}


export const mapStateToProps = (state) => ({
  directions: state.directions,
  startWeather: state.startWeather,
  isLoading: state.isLoading
});

export const mapDispatchToProps = (dispatch) => ({
  getNewDirections: (origin, departure, mode) => dispatch(getCurrentDirections(origin, departure, mode,)),
  displayWeatherStart: (city) => dispatch(getCurrentWeather(city)),
});

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchDirections));

Answer 1

Я предлагаю вам попробовать еще раз поработать с модулем npm для подключенного реагирующего маршрутизатора. В дополнение к этому модулю попробуйте использовать модуль npm Redux Form для обработки вашей формы. Redux Form имеет декоратор, который позволяет подключать компонент формы к Redux. Этот декоратор, называемый reduxForm , имеет много свойств, включая onSubmit и, как мне кажется, вам нужно получить новую страницу при использовании маршрутизатора, onSubmitSuccess . Вот хорошая статья об использовании Redux Form .

Answer 2

Установка этого способа может помочь, так как вам нужно передать функции withRouter (HOC) вашему компоненту:

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SearchDirections));