Как мне остановить состояние настройки счетчика?

Question

У меня есть компонент, в котором у меня есть объект-астероид с несколькими значениями. и есть дни: 1 в моем состоянии. где я визуализирую свой астероид, я делаю * раз больше, чем каждое значение, чтобы получить значение для астероида за день. что я хочу сделать, так это перестать считать, когда общая масса астероида == totalSumMined. общая добытая сумма равна сумме всех добытых химикатов. Я пробовал несколько вещей, но ничего не работает. это мой компонент:

import React, { Component } from "react";
//import * as uuid from "uuid";

class Stock extends Component {
  state = {
    asteroid: { ...this.props },
    days: 1,
  };
  handleClick = () => {
    this.setState((prevState) => ({ days: prevState.days + 1 }));
  };

  render() {
    const remainingMpct = parseInt(this.state.asteroid.remainingMpct);
    console.log(typeof remainingMpct);
    const nickel = this.state.asteroid.chemPerDay[0];
    const iron = this.state.asteroid.chemPerDay[1];
    const cobalt = this.state.asteroid.chemPerDay[2];
    const water = this.state.asteroid.chemPerDay[2];
    const nirtogen = this.state.asteroid.chemPerDay[4];
    const ammonia = this.state.asteroid.chemPerDay[5];
    // console.log(nickel, iron, cobalt, water, nirtogen, "NICKEL");

    return (
      <div className="stock">
        <p>
          - Day {this.state.days}
          <button type="button" className="inButton" onClick={this.handleClick}>
            +
          </button>{" "}
        </p>
        <hr />
        <p> - mass nickel: {nickel * this.state.days} </p>
        <p> - mass iron: {iron * this.state.days} </p>
        <p> - mass cobalt: {cobalt * this.state.days} </p>
        <p> - mass water: {water * this.state.days} </p>
        <p> - mass nitogen: {nirtogen * this.state.days} </p>
        <p> - mass ammonia: {ammonia * this.state.days} </p>
        <hr />
        <p>
          - Total mass mined:{" "}
          {this.state.asteroid.totalSumMined * this.state.days ===
          this.state.asteroid.asteroid.mass
            ? null
            : this.state.asteroid.totalSumMined * this.state.days}
        </p>

        <p>- remaing mass: {remainingMpct / this.state.days}%</p>
      </div>
    );
  }
}

export default Stock;

Answer 1

Думаю, вам, наверное, нужно реализовать метод getDerivedStateFromProps. Ваш обработчик кликов зависит от свойств состояния, которые задаются реквизитами. Итак, вам нужно обновлять свое состояние всякий раз, когда ваши реквизиты меняют свое значение.

В вашем компоненте

static getDerivedStateFromProps(props, state) {
  return {
    asteroid: { ...props },
    days: state.days,
  };
}

Answer 2

Я не уверен, полностью ли я понимаю расчет в вашем вопросе, но, может быть, вы могли бы сделать что-то вроде этого?

import React, { Component } from "react";

class Stock extends Component {
  constructor(props: { asteroid: Asteroid }) {
    super(props);
    // What is the point of putting asteroid in state when you never change the asteroid's state?
    this.state = {
      days: 1
    };
  }

  get isFullyMined() {
    // object destructuring might clean up your code a bit.
    const { totalSumMined, mass } = this.props.asteroid;
    return totalSumMined >= mass;
  }

  handleClick = () => {
    // condition to stop changing state
    if (!this.isFullyMined) {
      this.setState(prevState => ({ days: prevState.days + 1 }));
    }
  };

  render() {
    // object destructuring might clean up your code a bit.
    const {
      remainingMpct,
      totalSumMined,
      mass,
      chemPerDay: [nickel, iron, cobalt, water, nitrogen, ammonia] // why not use an object instead of an array, it would be more robust
    } = this.props.asteroid;

    // using the getter to disable the button is a nice usability change
    return (
      <div className="stock">
        <p>
          - Day {this.state.days}
          <button
            type="button"
            className="inButton"
            onClick={this.handleClick}
            disabled={this.isFullyMined}
          >
            +
          </button>{" "}
        </p>
        <hr />
        <p> - mass nickel: {nickel * this.state.days} </p>
        <p> - mass iron: {iron * this.state.days} </p>
        <p> - mass cobalt: {cobalt * this.state.days} </p>
        <p> - mass water: {water * this.state.days} </p>
        <p> - mass nitrogen: {nitrogen * this.state.days} </p>
        <p> - mass ammonia: {ammonia * this.state.days} </p>
        <hr />
        <p>
          - Total mass mined:{" "}
          {totalSumMined * this.state.days >= mass
            ? null
            : totalSumMined * this.state.days}
        </p>

        <p>- remainig mass: {remainingMpct / this.state.days}%</p>
      </div>
    );
  }
}

export default Stock;