Динамическое обновление состояния в React перезаписывает все состояние

Question

Хорошо, поэтому я пытаюсь создать форму в React, где я могу вводить значения в несколько входов, а затем отправлять и заполнять указанные ячейки в таблице. Я пытаюсь обновить состояние с помощью onChange, но когда я ввожу значения, мое начальное состояние полностью перезаписывается.

Итак, если я установлю:

state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

, затем попробуйте обновить состояние, введя «3» во вход для «первого», используя:

this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );

состояние отображается как:

Jan012019 {
    first: '3'
}

полностью удаляет «second» из состояния, и если я пытаюсь затем также ввести значения во «второй» ввод, он удаляет «first» из состояния. Что тут происходит? Я видел другие примеры и решения, и я вполне уверен, что мой код был в точности как решение из другого вопроса здесь, но все еще не будет работать правильно. Полный код ниже.

import React from "react";

class InputForm extends React.Component {
  state = {
    Jan012019: {
      first: null,
      second: null
    }
  };

  updateTable = e => {
    this.setState(
      {
        Jan012019: {
          [e.target.name]: e.target.value
        }
      },
      function() {
        console.log(this.state);
      }
    );
  };
  onClick = e => {
    e.preventDefault();
    console.log(this.state);
  };

  render() {
    return (
      <form className="ui form" style={{ marginTop: "50px" }}>
        <div className="inline field">
          <label style={{ marginRight: "27px" }}>First Input</label>
          <input
            name="first"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <div className="inline field">
          <label>Second Input</label>
          <input
            name="second"
            type="number"
            placeholder="Enter value"
            onChange={this.updateTable}
          />
        </div>
        <button onClick={this.onClick}>Click</button>
      </form>
    );
  }
}

export default InputForm;

Я также попытался установить входные значения:

value={this.state.Jan012019.first}

чтобы узнать, имеет ли это какое-то значение, но не стоит.

Answer 1

Это потому, что вы сбрасываете весь объект Jan012019 в вашем setState.

Jan012019: {
  [e.target.name]: e.target.value
}

Сначала необходимо распространить исходный объект Jan012019, чтобы сохранить остальные поля

this.setState({ 
   Jan012019: { 
      ...this.state.Jan012019, [e.target.name]: e.target.value 
   }
})