Question

Я использую реагирующие крючки. Компонент начинается с одного поля ввода. Я пытаюсь динамически добавлять входы при нажатии на кнопку «Добавить». Нажатие кнопки «Добавить» приведет к тому, что в компоненте будет 2 поля ввода. Нажатие во второй раз приведет к трем полям ввода ... и т. Д.

Я достиг этого. Однако, если я нажму кнопку после того, как наберу некоторые значения в предыдущих полях ввода, значения go исчезнут, и поля ввода снова станут пустыми. Как сохранить то, что я набрал в предыдущих полях ввода, даже после нажатия кнопки «Добавить»?

Все входы хранятся в массиве с именем «inputArray», а затем массив ввода обрабатывается.

Примечание: под одним полем ввода я подразумеваю один контейнер, который включает несколько полей ввода. Вы нажимаете добавить, вы добавляете второй контейнер и так далее. Пожалуйста, проверьте СКРИНШОТЫ, если вы не уверены

  useEffect(()=>{
    setInputArray(inputArray => [...inputArray, additionalIngredient(index)]);
  }, []);

ВНУТРИ «ВОЗВРАТА»

          {
            inputArray.map((e,i)=>{
              return <div ref={register} className={s1} key={i+(Math.random()*18)}>{e}</div>
            })
          }

СКРИНШОТЫ: