Строки таблицы исчезают при переходе на следующую страницу

Question

Я новичок в реакции. Я использую метод addrow для добавления значений в таблицу, созданную с помощью {this.state.rows.map}. Появится таблица со значениями полей ввода. Однако при нажатии кнопки «Продолжить» до go на следующую страницу и последующем возврате со страницы, нажав кнопку «Назад», строка исчезает.

Вот код:

<Grid item xs={10} direction="row" alignItems="center">
              <table
                className="table table-bordered table-hover"
                id="tab_logic"
              >
                <thead>
                  {this.state.rows.length > 0 ? (
                    <tr>
                      <th className="text-center"> # </th>
                      <th className="text-center"> KPI </th>
                      <th className="text-center"> UOM </th>
                      <th className="text-center"> Base </th>
                      <th className="text-center"> Target </th>
                      <th className="text-center"> Target Date </th>
                      <th className="text-center"> Delete Row </th>
                    </tr>
                  ) : null}
                </thead>
                <tbody>
                  {this.state.rows.map((item, idx) => (
                    <tr id="addr1" key={idx}>
                      <td>{idx + 1}</td>
                      <td>
                        <input
                          type="text"
                          name="Kpi_Before"
                          defaultValue={Kpi_Before}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="UOM_Before"
                          defaultValue={UOM_Before}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Base_Before"
                          defaultValue={Base_Before}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="Target_Before"
                          defaultValue={Target_Before}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                        />
                      </td>
                      <td>
                        <input
                          type="text"
                          name="dateTime"
                          defaultValue={dateTime}
                          onChange={this.handleChangeRows(idx)}
                          className="form-control"
                          readOnly
                          size="38"
                        />
                      </td>
                      <td>

Код для изменений и перехода назад и вперед следующий:

continue = e => {
e.preventDefault();
      this.props.nextStep();
    }
  };

back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

handleChangeRows = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];

    rows[idx] = {
      [name]: value
    };

    this.setState({
      rows
    });
  };



handleAddRow = () => {const item = {
        Kpi_Before: [],
        UOM_Before: "",
        Base_Before: "",
        Target_Before: "",
        dateTime: "",
        rows:[]
      };
      this.setState({
        rows: [...this.state.rows, item]
      });
    }
  };




nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1
    });
  };

  //Go back to previous step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1
    });
  };

Как мне не дать строкам исчезнуть и сохранить их постоянство при движении назад и вперед?

Answer 1

Ваше состояние повторно отображается, когда вы перемещаетесь между страницами или refre sh, что означает, что все внутри состояния теряется, чтобы бороться с этим, вы можете либо:

1) Использовать redux для сохранения изменений и извлечения данных оттуда .

2) Используйте контекстный API, который такой же, как redux, но встроенный для реакции.

3) Используйте REST API, что означает наличие какого-то бэкэнда для хранения значений и их передачи компонентное крепление.