Приложение React работает только половину времени - PullRequest
Новая
       4

Приложение React работает только половину времени

0 голосов
/ 31 марта 2020

Я начинаю Reactjs, и теперь у меня проблема с моим приложением, которое не работает половину времени, но иногда работает. Я думаю, что проблема связана с ComponentDidMount, но я не могу это исправить. Мое приложение состоит в проверке вашей способности переводить некоторые слова, которые хранятся в моем состоянии, функции очень просты, поэтому я не понимаю, почему приложение иногда падает. Ошибка говорит: " Невозможно прочитать свойство '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) => {
 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;

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Можете ли вы попробовать что-то подобное без монтирования 

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;
0 голосов
/ 31 марта 2020

Попробуйте добавить это this.state.currentWord?.francais вместо this.state.currentWord.francais приложение не взломает sh

...