[英]React App working only working half of the time
我正在開始使用 Reactjs,但現在我的應用程序出現了一個問題,該問題在一半時間無法運行,但有時可以運行。 我猜這個問題與 ComponentDidMount 有關,但我無法修復它。 我的應用程序包括測試您翻譯存儲在我的狀態中的一些單詞的能力,功能非常簡單,所以我不明白為什么應用程序有時會崩潰。 錯誤說“無法讀取未定義的屬性‘法郎’ ”
import React from 'react';
import './App.css';
class App extends React.Component {
constructor() {
super();
this.state = {
words: [
{
francais: 'bonjour',
anglais: 'hello',
},
{
francais: 'manger',
anglais: 'eat',
},
{
francais: 'avoir',
anglais: 'have',
},
{
francais: 'faire',
anglais: 'do',
},
{
francais: 'jouer',
anglais: 'play',
}
],
key: -1.4,
currentWord: '',
currentAnswer: '',
correctAnswer: false,
giveUp: false
}
}
generateWord = () => {
let index = Math.floor(Math.random() * (this.state.words.length + 1))
if(index === this.state.key) {
this.generateWord()
}
this.setState({currentWord: this.state.words[index]})
this.setState({key: index})
}
validate = (e) => {
e.preventDefault()
const answer = e.target.value
this.setState({ currentAnswer: answer })
if (this.state.currentAnswer !== this.state.currentWord.anglais) {
this.setState({correctAnswer : false})
}
else {
this.setState({correctAnswer : true})
}
}
showCorrection = (e) => {
e.preventDefault()
this.setState({giveUp: true})
}
nextWord = (e) => {
e.preventDefault()
this.setState({currentAnswer: ''})
this.setState({ giveUp: false })
this.generateWord()
}
componentDidMount() {
this.generateWord()
}
render() {
return (
<div className="App">
<h2 style={{
color: "midnightblue",
fontSize: "50px"
}}>{this.state.currentWord.francais}</h2>
<form action="">
<input onChange={this.validate} value={this.state.currentAnswer} type="text" placeholder="Entrez la traduction anglaise"/>
<button className="validation" onClick={this.showCorrection}>Give up</button>
<button className="validation" onClick={this.nextWord}>Next</button>
</form>
{this.state.correctAnswer ? <p>Correct !</p> : this.state.giveUp ? <p>La bonne réponse était: {this.state.currentWord.anglais}</p>: ''}
</div>
)
}
}
export default App;
嘗試添加this.state.currentWord?.francais
而不是this.state.currentWord.francais
應用程序不會崩潰
你能在沒有安裝的情況下嘗試這樣的事情嗎
import React from 'react';
import './App.css';
class App extends React.Component {
constructor() {
super();
this.state = {
words: [
{
francais: 'bonjour',
anglais: 'hello',
},
{
francais: 'manger',
anglais: 'eat',
},
{
francais: 'avoir',
anglais: 'have',
},
{
francais: 'faire',
anglais: 'do',
},
{
francais: 'jouer',
anglais: 'play',
}
],
key: -1.4,
currentWord: '',
currentAnswer: '',
correctAnswer: false,
giveUp: false
}
}
generateWord = () => {
let index = Math.floor(Math.random() * (this.state.words.length + 1))
if(index === this.state.key) {
this.generateWord()
}
this.setState({currentWord: this.state.words[index]})
this.setState({key: index})
}
validate = (e) => {
this.generateWord()
const answer = e.target.value
this.setState({ currentAnswer: answer })
if (answer !== this.state.currentWord.anglais) {
this.setState({correctAnswer : false})
}
else {
this.setState({correctAnswer : true})
}
}
showCorrection = (e) => {
e.preventDefault()
this.setState({giveUp: true})
}
nextWord = (e) => {
e.preventDefault()
this.setState({currentAnswer: ''})
this.setState({ giveUp: false })
this.generateWord()
}
render() {
return (
<div className="App">
<h2 style={{
color: "midnightblue",
fontSize: "50px"
}}>{this.state.currentWord.francais}</h2>
<form action="">
<input onChange={this.validate} value={this.state.currentAnswer} type="text" placeholder="Entrez la traduction anglaise"/>
<button className="validation" onClick={this.showCorrection}>Give up</button>
<button className="validation" onClick={this.nextWord}>Next</button>
</form>
{this.state.correctAnswer ? <p>Correct !</p> : this.state.giveUp ? <p>La bonne réponse était: {this.state.currentWord.anglais}</p>: ''}
</div>
)
}
}
export default App;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.