Реагировать JS setState не обновляя значение - PullRequest
Новая
       7

Реагировать JS setState не обновляя значение

0 голосов
/ 11 мая 2018

очень плохо знаком с React.

Несмотря на то, что здесь есть много вопросов относительно ReactJS, я все еще не могу решить эту проблему.

Я хочу сбросить состояние или обнулитьэто, но по какой-то причине состояние не сбрасывается (однако я могу добавить к нему больше символов, см. ниже)

Код для добавления дополнительных символов (работает) ...: 

var temp=this.state.numDisplay.toString() + id.toString();
this.setState( {numDisplay :  temp},  () => this.forceUpdate());

Код, который не вызывает изменения значения: 

this.setState({numDisplay : 0},  () => this.forceUpdate());

Я пробовал несколько способов изменить numDisplay, например, использовать переменную со значением ноль, но эти способы не работали.

Любой совет будет оценен.Спасибо.

Редактировать: 

class Calc extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      numDisplay: 0,
      num1: 0,
      num2: 0,
      oper: ""
    };
    this.appendNum = this.appendNum.bind(this);
    this.appendoper = this.appendoper.bind(this);
  }

  appendNum(event) {
    if (
      event.target.id.toString() === "." &&
      this.state.numDisplay.toString().includes(".")
    ) {
    } else {
      var temp = this.state.numDisplay.toString() + event.target.id.toString();

      {
        while (temp.charAt(0) === "0") {
          temp = temp.substr(1);
        }
      }

      this.setState(
        {
          numDisplay: temp
        },
        () => this.forceUpdate()
      );
    }
  }

  appendoper(event) {
    if (this.state.numDisplay !== 0) {
      if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

  render() {
    let buttons = [];
    let cbuttons = [];

    for (var i = 9; i > -1; i--) {
      buttons.push(
        <button className="mainBtns" id={i} onClick={e => this.appendNum(e)}>
          {i}{" "}
        </button>
      );
    }

    buttons.push(
      <button id="." className="mainBtns" onClick={e => this.appendNum(e)}>
        .{" "}
      </button>
    );
    buttons.push(
      <button className="mainBtns" onClick={e => this.appendNum(e)}>
        ={" "}
      </button>
    );

    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"+"}
        onClick={e => this.appendoper(e)}
      >
        +
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"-"}
        onClick={e => this.appendoper(e)}
      >
        -
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"/"}
        onClick={e => this.appendoper(e)}
      >
        /
      </button>
    );
    cbuttons.push(
      <button
        className="mainBtns , cBtns"
        id={"*"}
        onClick={e => this.appendoper(e)}
      >
        *
      </button>
    );

    return (
      <section>
        <div id="dispArea">{this.state.numDisplay}</div>

        <div id="mainNumBtns">{buttons}</div>
        <div id="calcBtns">{cbuttons}</div>
      </section>
    );
  }
}

ReactDOM.render(<Calc />, document.getElementById("root"));

Работать над калькулятором, функциональности пока нет: (

1 Ответ

0 голосов
/ 11 мая 2018

Похоже, это не связано с обновлением состояния реакции. Вы должны проверить свой оператор if в методе appendoper. 

appendoper(event) {
    if (this.state.numDisplay !== 0) {
      if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

Не доходит до этого утверждения: 

this.setState({ numDisplay: 0 }, () => this.forceUpdate());

Исправьте следующее условие if для возврата true или false: 

if (
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
      )

Если вы выполните обновление следующим образом, ваш код будет запущен: 

appendoper(event) {
    if (this.state.numDisplay !== 0) {
        this.state.num1 === 0
          ? this.setState({ num1: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
          : this.setState({ num2: this.state.numDisplay }, () =>
              this.forceUpdate()
            )
        this.setState({ numDisplay: 0 }, () => this.forceUpdate());
    }
  }

Проверьте также здесь: https://codesandbox.io/s/r1wjp90wlq

...