React Unhandle Rejection (TypeError)：无法读取 undefined 的属性"state"

Question

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

所以我创建了clearSubmit()方法，再次将hasSubmitted值更改为 false，将该方法传递到显示页面的路由中，并在显示页面的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 | }

应用.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
}
}

我不知道我错过了什么。

谢谢。

Answer 1

我认为您没有将任何称为位置的道具对象传递到GameShow中.js(当您在App.js中渲染对象时(。

Answer 2

你正在尝试成功

this.props.location.state.selectedGame

在游戏显示中，但位置未作为道具传递给此组件，

所以你的状态是不确定的

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}， 因此，您的propsundefined，并且出现此错误。

您可以传递空白对象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
}