Как обнулить данные?

Question

[Полина Титова]

При клике на правильный или не правильный ответ меняется цвет:

spoiler

При переходе на новый уровень цвета остаются на том же месте, это означает, что значения остаются теми же:

spoiler

Если посмотреть на код то сначала userAction(выбор ответа пользователем) равен null, после идёт присвоение значения и основная работа: сравнение с правильным ответом и отображение подходящего цвета:

spoiler

state = {
    userAction: null
  }

onItemClick = (item) => {
    this.state.userAction = Number(item.target.id)
    if (this.state.userAction === answer) {
      item.target.firstChild.className = "li-btn right"
    }
}

При переходе на новый уровень значение userAction снова меняется на null:

nextLevel = () => {
    const { count, userAction, score } = this.state
    if (count < 5 && userAction === this.state.bird.id) {
      this.setState({
        userAction: null,
      })
    }
}

Тогда почему не работает и как можно исправить?

Comments

[nickname13384]

Переход на новый уровень без использования react-router-dom?

вы в курсе что так нельзя менять state?
this.state.userAction = Number(item.target.id)

Answer 1

[nickname13384]

Почему не написать так?

onItemClick = (item) => {
    const id = Number(item.target.id) // const {id, firstChild } = item.target
    if (id === answer) {
      item.target.firstChild.className = "li-btn right"
    }
}

Зачем нужна проверка при клике на новый уровень?
по идее кнопка "Next Level" должна быть disabled пока не сделали выбор
добавьте в setState обнуления цвета и что там у вас еще должно обнуляться

nextLevel = () => {
      this.setState({
        userAction: null,
      })
}

Comments

[Полина Титова]

Проверка нужна, так как если условия не выполнены, то кнопка не подсвечивает и не переходит на другой уровень. В данном случае есть просто кнопка и другие элементы, и после того, как условие выполняется, то переход совершается. А не так: если условие проходит, то запускается функция.

Почему не написать так?

onItemClick = (item) => {
    const id = Number(item.target.id) // const {id, firstChild } = item.target
    if (id === answer) {
      item.target.firstChild.className = "li-btn right"
    }
}

Если сделать так, то будет работать? Разве здесь не просто this.state.userAction меняется на const id?

[nickname13384]

Полина Титова, setState нельзя напрямую изменять
если не можете обойтись без userAction

onItemClick = (item) => {
   const {id, firstChild } = item.target

    if (id === answer) {
      item.target.firstChild.className = "li-btn right"
    }
  this.setState({
     userAction: id
       })
}

[nickname13384]

Полина Титова, можно весь код увидеть? можете сюда кинуть или на codesandbox

[Полина Титова]

nickname13384, Весь код вообще или файла о котором идёт речь?

[nickname13384]

Полина Титова, лучше весь, но можно только этот файл

[Полина Титова]

И текущий файл и весь

[nickname13384]

Полина Титова,
answers.js

import React, { Component } from 'react';

import './answers.css';

export default class Answers extends Component {

  render() {
    const { allBirdsInStage, onItemClick, userAction, answer } = this.props;
    return (
      <ul className="item-list list-group">
        {allBirdsInStage.map((item, index) => {
          let cls = "";
          if (((index + 1 ) === userAction) && ( userAction === answer)) {
            cls = "right";
          }
          else if (((index + 1 ) === userAction) &&  ( userAction !== answer)){
            cls = "error";
          }
          return (
            <li key={item.id} className={`list-group-item`}
              id={item.id}
              onClick={() => onItemClick(index)}>
              <span className={`li-btn ${cls}`}></span>
              {item.name}
            </li>
          )
        })}
      </ul>
    )
  }
}

App.js

import React, { Component } from 'react';

import Header from './components/header';
import CurrentQuestion from './components/current-question';
import Answers from './components/answers'
import Description from './components/description'
import GameOver from './components/game-over'

import rightSound from '../src/data/win.mp3'
import errorSound from '../src/data/error.mp3'

import birdsData from './data/birds-data'
import './App.css'

class App extends Component {
  state = {
    count: 0,
    score: 0,
    ball: 5,
    answer: null,
    userAction: null,
    currentBird: null,
    allBirdsInStage: birdsData[0],
    bird: birdsData[0][Math.floor(Math.random() * Math.floor(birdsData[0].length))]
  }

  onItemClick = (index) => {
   const num = index + 1

   this.setState({userAction: num})
    if (num === this.state.bird.id) {
      this.setState((state) => ({
        score: state.score + state.ball
      }));
    }

    if (num === this.state.bird.id) {

      // firstChild.className = "li-btn right"

      document.getElementById("right").play()
    } else {


      document.getElementById("error").play()
    }

    if (num !== this.state.bird.id) {
      this.setState(state => {
        return {
          ball: state.ball - 1
        }
      })
    }

    if (this.state.ball < 0) {
     this.setState({ball: 0})
    }

    const currentBird = this.state.allBirdsInStage[this.state.userAction - 1]

    this.setState({ currentBird })
    // console.log('id: ' + this.state.userAction)
    // console.log('answer: ' + this.state.bird.id)
    // console.log('userAction: ' + this.state.userAction)
    // console.log('ball: ' + this.state.ball)
    return currentBird
  }

  onButtonClick = () => {
    const { count, userAction, score } = this.state
    
    if (count < 5 && +userAction === this.state.bird.id) {
      this.setState({
        count: count + 1,
        ball: 5,
        score: score,
        answer: null,
        userAction: null,
        currentBird: null,
        allBirdsInStage: birdsData[count + 1],
        bird: birdsData[count + 1][Math.floor(Math.random() * Math.floor(birdsData[count + 1].length))]
      })
    }

    if (count === 5) {

      this.setState({
        count: 6,
        score: score,
        ball: 5,
        answer: null,
        userAction: null,
        currentBird: null,
        allBirdsInStage: birdsData[0],
        bird: birdsData[0][Math.floor(Math.random() * Math.floor(birdsData[0].length))]
      })
    }
  }

  replay = () => {
    this.setState({
      count: 0,
      score: 0,
      ball: 5,
      answer: null,
      userAction: null,
      currentBird: null,
      allBirdsInStage: birdsData[0],
      bird: birdsData[0][Math.floor(Math.random() * Math.floor(birdsData[0].length))]
    })
  }

  render() {
    const { count, score, userAction, currentBird, allBirdsInStage, bird } = this.state
         console.log(this.state)
    return (
      <div>
        {count === 6 ? <GameOver
          score={score}
          replay={this.replay}
        /> : <Game
            bird={bird}
            count={count}
            score={score}
            userAction={userAction}
            onItemClick={this.onItemClick}
            currentBird={currentBird}
            allBirdsInStage={allBirdsInStage}
            onButtonClick={this.onButtonClick}
          />}
      </div>
    );
  }
}

export default App;

class Game extends Component {
  render() {
    const { count, score, userAction, currentBird, allBirdsInStage, bird, onButtonClick, onItemClick } = this.props
    return (
      <React.Fragment>
        <Header
          count={count}
          score={score}
        />
        <CurrentQuestion
          count={count}
          answer={bird.id}
          userAction={userAction}
          bird={bird}
        />
        <div className="row mb2">
          <div className="col-md-6">
            <Answers
              allBirdsInStage={allBirdsInStage}
              userAction={userAction}
              onItemClick={onItemClick}
              answer={bird.id}
              bird={bird}
            />
          </div>
          <div className="col-md-6">
            <Description
              currentBird={currentBird}
            />
          </div>
          <button className={+userAction === bird.id ? 'btn next-level' : 'btn'}
            onClick={onButtonClick}
          >Next level</button>
          <audio id="right" src={rightSound}/>
          <audio id="error" src={errorSound}/>
        </div>
      </React.Fragment>
    )
  }
}

[nickname13384]

В реакт нельзя так классы изменять firstChild.className = "li-btn right"