Как поменять Государство неизменно Реагировать

Question

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

для контекста;

Функция ниже работает внутри другой функции handleChange, которая принимает событие и присваивает различные данные в «event.target» именам переменных, pos и значению.Функция обновления создает и возвращает объект с массивами.Я использую объект для обновления состояния.Каждый раз, когда происходит событие onchange, которое вызывает общую функцию, состояние показывает только текущие данные onchange, а не данные из предыдущих входов, которые уже претерпели «изменение» (надеюсь, вы понимаете, что я имею в виду)

дальнейшие разъяснения;

Я пытаюсь каждый раз обновлять состояние, используя обработчик события onChange во входных данных.Я изменяю значения unput, он отражает изменения в состоянии (консоль отлично регистрирует изменения), однако, как только я изменяю значения другого входа, предыдущие изменения в состоянии исчезают.

Я хотел бы изменить значения ввода, сохранить это значение в состоянии, изменить другой ввод, сохранить это значение также в объекте массивов .. и т. Д., А затем получить доступ ко всем значениям.Теперь я могу получить доступ только к последнему

  handleInputChange(e) {
if (e.target.value) {
  e.preventDefault();

  var formDataArray = {
    code: [],
    desc: [],
    qty: [],
    prices: [],
    line_price: []
  };

  let update = function(value, pos, name) {
    switch (name) {
      case "description":
        formDataArray.desc[pos - 1] = value;

        break;
      case "code":
        formDataArray.code[pos - 1] = value;
        break;
      case "qty":
        formDataArray.qty[pos - 1] = value;
        break;
      case "price":
        formDataArray.prices[pos - 1] = value;
        break;
      case "line_price":
        formDataArray.line_price[pos - 1] = value;

        break;
      default:
    }
    return formDataArray;
  };

  var valuesTwo = e.target.name.split("-");

  var name = valuesTwo[1];
  var value = e.target.value;
  var pos = valuesTwo[0];

  //  update(value, pos, name);
  //  update(value, pos, name);
  this.setState({ formData: update(value, pos, name) });
}

}

результату функции обновления

{code: Array(0), desc: Array(1), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
["test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

, когда я изменяю значения другого входа

{code: Array(0), desc: Array(2), qty: Array(0), prices: Array(0), line_price: Array(0)}
code
:
[]
desc
:
(2) [empty, "another test"]
line_price
:
[]
prices
:
[]
qty
:
[]
__proto__
:
Object

Часть, в которой написано пустое, я хотел бы сохранить предыдущий "тест" данных

Так генерируются входы;Это сеточная система.Существует пять входов (представьте их как строку), когда пользователь нажимает кнопку, создается другая строка (строка 2), когда нажимается другая кнопка, создается строка 3.Поля ввода являются, например, (2-описание).Я хотел бы сохранить его как сетку массива некоторого вида для выполнения некоторой функциональности, например добавить целый столбец, когда пользователь вводит поля, например, цену.

 triggerRows() {
        this.setState({
          invoiceRows: this.state.invoiceRows + 1,
          viewSubmitButton: true
        });
      }

  dynamicRows() {
    var items = [];
    for (var i = 1; i < this.state.invoiceRows; i++) {
      items.push(
        <div>
          <input
            onClick={this.triggerRows}
            type="text"
            name={i + "-code"}
            defaultValue="code"
            key={i}
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-description"}
            defaultValue="description"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-qty"}
            defaultValue="qty"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-price"}
            defaultValue="price"
            onChange={this.handleInputChange}
          />
          <input
            type="text"
            name={i + "-line_price"}
            defaultValue="line Price"
            onChange={this.handleInputChange}
          />
          <br />
        </div>

Answer 1

setState работает как async, поэтому, чтобы увидеть изменения в консоли после обновления состояния, поместите console.log в callback функцию состояния.

 this.setState({
     ...this.state,
     formData: update(value, pos, name)
 }, () => console.log(this.state.formData));

Answer 2

На самом деле, если вы передадите объект setState , он выполнит слияние

Так что this.setState({formData: update(value, pos, name)}); просто обновит свойство formData

Кстати, setState является асинхронным , тогда console.log(this.state.formData); не будет записывать обновленное значение, вместо этого вы можете передать обратный вызов setState

this.setState(
    {formData: update(value, pos, name)},
    () => console.log(this.state.formData)
);

Answer 3

это то, что вы пытаетесь достичь?

var valuesTwo = e.target.name.split("-");

        var name = valuesTwo[1];
        var value = e.target.value;
        var pos = valuesTwo[0];

        //  update(value, pos, name);
        this.setState(state => ({
            formData: {...state.formData, ...update(value, pos, name)}
        }), () => console.log(this.state.formData));