通过表单创建新游戏后，我可以重定向到新创建的游戏的显示页面，但如果我想进入游戏索引页面，它会重新加载新创建的游戏的显示页面。我需要刷新才能进入游戏的索引页面。
因此，我创建了clearSubmit()方法，再次将hasSubmitted值更改为false，将该方法传递到show page的路由中，并在show page的component(GameShow.js)中调用clearSubmit（）方法作为道具。
现在，当我提交表单创建一个游戏，我得到了这个错误：

React Unhandled Rejection (TypeError): Cannot read property 'state' of 
undefined

src/components/GameShow.js:14

11 | constructor(props) {
12 |   super(props)
13 |   this.state = {
> 14 |     game: this.props.location.state.selectedGame
15 |   }
16 | }

应用程序js

class App extends Component {

  constructor(props) {
  super(props)
  this.state = {
   games: [] ,
   name: '',
   img_url: '',
   genre: '',
   platforms: '',
   video_url: '',
   description: '',
   hasSubmitted: false,
   newGame: {}
 }

   this.handleSubmit = this.handleSubmit.bind(this)
   this.handleChange = this.handleChange.bind(this)
   this.clearSubmit = this.clearSubmit.bind(this) 
}

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

   handleSubmit = (e) => {
    e.preventDefault();
    const { name, img_url, genre, platforms, video_url, description} = 
           this.state;

   axios.post('http://localhost:4000/api/games', { name: name, img_url: 
    img_url, genre: genre, platforms: platforms, video_url: video_url, 
    description: description })
     .then((result) => {
       this.setState({
         hasSubmitted: true,
         newGame: result.data
       })
    });
  }

  clearSubmit() {
    this.setState({
      hasSubmitted: false
    })
  }

  render() {
   return (
    <Router>
     <div>
      <main>
        <Route exact path='/games' render={() => {
          let newGame = this.state.newGame
          return this.state.hasSubmitted
            ? <Redirect to=
                   {{pathname:`/games/${this.state.newGame.name}`, 
                     state: {selectedGame: newGame}}} 
              />
            : <GameForm handleChange={this.handleChange}   
              handleSubmit={this.handleSubmit} games={this.state.games} 
              />
          } }
        />

        <Route exact path='/games' render={() => {
            return (
            <GameIndex handleChange={this.handleChange}   
              handleSubmit={this.handleSubmit} games={this.state.games} 
            />
          )
          } }
        />
        <Route path="/games/:name" render={() => {
            return (
              <GameShow clearSubmit={this.clearSubmit} />
            )      
          } }
     />
      </main>
    </div>

游戏索引.js**

class GameIndex extends Component {

    render() {
       let videoGames = this.props.games.map((game, i) =>{
       let pathname = `/games/${game.name}`

       return (
        <div key={i}>
          <p><Link to=
         {{ pathname, state: {selectedGame: game}}}> {game.name}</Link></p>
        </div>
    )
  })

游戏秀.js

class GameShow extends Component {
  componentDidMount() {
   this.props.clearSubmit()
 }

 constructor(props) {
  super(props)
  this.state = {
   game: this.props.location.state.selectedGame
 }
}

我不知道我错过了什么。

• 谢谢-谢谢