Как я могу редактировать ввод, добавленный динамически, без ввода моих данных, заполняющих другие входы в этом массиве?

Question

У меня есть форма formik , которая отображает View с двумя inputs в зависимости от длины массива x.Длина x будет варьироваться в зависимости от различных сценариев.

Вот код.

import React, { Component, Fragment } from "react";
import { Button, TextInput, View, StyleSheet } from "react-native";
import { Formik } from "formik";

class App extends Component {
  render() {
    const x = [1,2];
    return (
      <View>
        <Formik
          initialValues={{ name: "", description: "" }}
          onSubmit={values => alert(JSON.stringify(values))}
        >
          {({ values, errors, handleBlur, handleChange, handleSubmit }) => (
            <Fragment>
              <TextInput
                placeholder="name"
                value={values.name}
                handleBlur={() => handleBlur("name")}
                onChangeText={handleChange("name")}
                style={styles.input}
              />
              <TextInput
                placeholder="description"
                value={values.description}
                handleBlur={() => handleBlur("description")}
                onChangeText={handleChange("description")}
                style={styles.input}
              />
              {x.map(x => {
                return (
                  <View>
                    <TextInput key={x}
                      placeholder={`name`}
                      value={values.name}
                      handleBlur={() => handleBlur}
                      onChangeText={handleChange}
                      style={styles.input}
                    />
                    <TextInput
                      placeholder={`description`}
                      value={values.description}
                      handleBlur={() => handleBlur(x.toString())}
                      onChangeText={handleChange}
                      style={styles.input}
                    />
                  </View>
                );
              })}
              <Button title="submit" onPress={handleSubmit} />
            </Fragment>
          )}
        </Formik>
      </View>
    );
  }
}

Когда я отправляю, я не могу заставить его работать должным образом.когда я печатаю, текст также заполняет все остальные вводы этого имени, например, если я набираю description, текст заполняет каждую другую итерацию description, как я могу сделатьэто работа?

Взгляните на закуску

ЗДЕСЬ

Answer 1

Вам необходимо динамически создать объект начальных значений для правильной работы отправки, например:

const x = [1, 2];
const initialFields = { name: "", description: "" };
const extraFields = x.map(num => ({
  [`name${num}`]: "",
  [`description${num}`]: ""
}));

Это можно передать в форму Formik следующим образом:

<Formik
  initialValues={Object.assign(initialFields, ...extraFields)}
  onSubmit={values => alert(JSON.stringify(values))}
>

Затем измените ваши динамически добавленные TextInputs, чтобы использовать эти значения следующим образом:

{x.map(x => {
  return (
    <View>
      <TextInput
        placeholder={`name${x}`}
        value={values[`name${x}`]}
        handleBlur={() => handleBlur(`name${x}`)}
        onChangeText={handleChange(`name${x}`)}
        style={styles.input}
      />
      <TextInput
        placeholder={`description${x}`}
        value={values[`description${x}`]}
        handleBlur={() => handleBlur(`description${x}`)}
        onChangeText={handleChange(`description${x}`)}
        style={styles.input}
      />
    </View>
  );
})}

Проверьте мой форк вашего CodeSandbox для рабочей демонстрации.