Как хранить реквизиты в одном объекте состояния

Question

У меня есть компонент, который получает несколько реквизитов, я хочу сохранить все эти реквизиты в одном объекте в состоянии и обменять их на один, как мне это сделать?

import React, { Component } from "react";
class Stock extends Component {
    state={
    asteroid:{ i want to put all my props here as a single object}
          };
          
    render() {
            const nickel = this.props.chemPerDay[0];
            const iron = this.props.chemPerDay[1];
            const cobalt = this.props.chemPerDay[2];
            const water = this.props.chemPerDay[2];
            const nirtogen = this.props.chemPerDay[4];
            console.log(nickel, iron, cobalt, water, nirtogen, "NICKEL");
            console.log(this.props.chemPerDay, "stockprops?");
            return (
              <div>
                <p> remaing: {this.props.remainingMpct} %</p>
                <p> remaing: {this.props.remainingMassPerday} mass</p>
                <p> Yield: {this.props.asteroidYieldPerDay}</p>
                <p> nickel: {nickel} </p>
                <p> iron: {iron} </p>
                <p> cobalt: {cobalt} </p>
                <p> water: {water} </p>
              </div>
            );
     }

} экспортировать стандартные запасы ;

Все эти реквизиты - это все значения, которые мне нужны каждый день, но я хочу, чтобы кнопка увеличивалась на день, обновляя состояние на каждый день

Как я могу это сделать?

Answer 1

Вы также можете настроить состояние следующим образом:

this.state = {
  nickle: props.chemPerDay[0],
  iron: props.chemPerDay[1],
  cobalt: props.chemPerDay[2]
};

Если вы хотите умножить эти значения при нажатии кнопки, вам нужно создать функцию onClick для умножения значений в состоянии а затем обновите состояние.

https://codesandbox.io/s/hopeful-bas-p1p6d?file= / src / App. js: 132-255

Answer 2

Что касается добавления реквизита в состояние - вы можете использовать оператор распространения следующим образом:

state={
  asteroid:{ ...this.props },
  days: 1
}

Если ваше состояние зависит от количества дней, вы также можете сохранить количество дней в своем состоянии. Добавьте состояние, как показано выше, с начальным значением 1. Затем выполните рефакторинг вашей части рендеринга с элементами, которые необходимо умножить следующим образом:

<p> Yield: {this.props.asteroid.asteroidYieldPerDay * this.props.days}</p>