Question

通过表单创建新游戏后，我可以重定向到新创建的游戏的显示页面，但如果我想进入游戏索引页面，则会重新加载新创建的游戏的显示页面。我需要刷新才能进入游戏的索引页面。

所以我创建了clearSubmit()方法，将hasSubmitted值再次更改为false，将方法传递到了show page的路径，并在show page的component(GameShow.js)中将clearSubmit（）方法称为props。

现在，当我提交表单来创建游戏时，我收到了这个错误：

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 | }

App.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>

GameIndex.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>
    )
  })

GameShow.js

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

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

我无法弄清楚我错过了什么。

感谢。

Answer 1

我认为你没有将任何名为location的道具对象传递给GameShow.js（当你在App.js中渲染对象时）。

Answer 2

你正试图进入

this.props.location.state.selectedGame

在GameShow中，但位置未作为此组件的道具传递，

所以你的状态未定义

Answer 3

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} 
              />

在false案例中，您没有通过state: {selectedGame: newGame}，因此，您的props为undefined，您会收到此错误。

你可以传递空白对象state: {selectedGame: {} } 在这里喜欢

 <GameForm handleChange={this.handleChange}   
                  handleSubmit={this.handleSubmit} games={this.state.games} ,state: {selectedGame: {} }
                  />

并在构造函数中进行代码清理。

this.state = {
   game: this.props.state && this.props.state.selectedGame
 }

React Unhandled Rejection（TypeError）：无法读取未定义的属性“state”

3 个答案: