redux withrouter 不适用于反应。它将呈现新页面，但不会使用新状态/道具呈现答案

【问题标题】：redux withrouter not working with react. It will render new page but won't render with new state/propsredux withrouter 不适用于反应。它将呈现新页面，但不会使用新状态/道具呈现
【发布时间】：2019-04-08 21:16:12
【问题描述】：

handleSubmitSearch 函数调用 thunk（调用 fetch 调用）以在新页面上呈现。这个函数在没有路由器的情况下工作，但是使用路由器，handleSubmitSearch 甚至不会被调用（控制台日志不会触发，也不会调用 fetch 调用）。我还尝试过使用多种生命周期方法，例如 componenetWillUpdate、componentShouldUpdate、componentwillreceiveprops 等。我还尝试安装 connected-react-router 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));

【问题讨论】：

我注意到，你没有给提交按钮任何类型，这可能是函数没有被调用的原因，给按钮type=submit然后尝试一次。
您是否尝试过在handleSubmitSearch 函数上设置一个断点，以便您可以单步执行？
不幸的是，在按钮上添加 type='submit' 不起作用@AnimeshSaraswat
@OliverRadini 我在 handleSubmitSearch 中放了一个调试器，它从未停止过代码
@KatieShamus 只是为了检查一下，您是否打开了 webtools？否则它不会达到断点

标签： javascript reactjs redux react-router-dom react-router-redux

【解决方案1】：

这样设置可能会奏效，因为您需要将 withRouter 的 (HOC) 功能传递给您的组件：

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

【讨论】：

【解决方案2】：

我建议您再次尝试使用 connected-react-router npm 模块。除了这个模块，尝试使用 npm Redux Form 模块来处理你的表单。 Redux Form 有一个装饰器，允许您将表单组件连接到 Redux。这个名为reduxForm 的装饰器有很多属性，包括onSubmit 以及我认为在使用路由器时需要渲染新页面的属性onSubmitSuccess。这是一篇关于使用Redux Form的好文章。

【讨论】：