Можно ли сохранить состояние компонентов, когда они хранятся в массиве, которым манипулируют? - PullRequest
Новая
       10

Можно ли сохранить состояние компонентов, когда они хранятся в массиве, которым манипулируют?

0 голосов
/ 23 апреля 2020

Я пытаюсь создать пошаговую форму

Я храню свои шаги в массиве json с соответствующим компонентом ({typeOfComponent, component, key}). Он работает хорошо, но:

Каждый раз, когда я делаю массив, например, когда я двигаюсь вверх / вниз на шаг или добавляю новый шаг между двумя шагами. Я теряю состояния внутри моего компонента.

Я пытался использовать мемо, я не понимаю, почему только когда позиция элемента моего композитора воссоздается. Можно ли как указатель в C хранить только его «адрес»

пример песочницы кода => https://codesandbox.io/s/infallible-maxwell-zkwbm?file= / src / App. js

В моем реальном проекте кнопка ADD - это кнопка для выбора нового типа шага

Есть ли какое-либо решение для манипулирования моими шагами без потери пользовательских данных внутри?

Спасибо за вашу помощь

1 Ответ

0 голосов
/ 24 апреля 2020

React перемонтирует компоненты внутри каждого повторного рендеринга, вероятно, по разным причинам. Я не мог заставить его работать как есть, но, подняв состояние с ваших компонентов, оно сработает.

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

Чтобы поднять состояние, я добавил текущее значение в массив шагов: 

function addNext(step, index) {
  componentKey++;
  setSteps(prevState => {
    let newState = [...prevState];
    step = 1;
    newState.splice(index + 1, 0, {
      stepNumber: step,
      component: getStepContent(step, componentKey),
      value: getDefaultValue(step),
      key: componentKey
    });
    return newState;
  });
}

Я также убедился, что ваш getStepContent только что возвратил компонент, а не узел, чтобы вы могли отобразить его следующим образом: 

          <step.component
            value={step.value}
            onChange={handleChange}
            data-index={i}
          />

Определенно, существует множество способов оптимизировать это, если вы начинаете сталкиваться с проблемами производительности. , конечно.

https://codesandbox.io/s/beautiful-river-2jltr?file= / src / App. js

...