Redux-form не форматирует данные сообщения и проблема с [object Object]

У меня две проблемы, которые являются результатом друг друга. Я заполняю два поля данными initialValue, а затем могу вставить другое поле в массив. Проблема возникла, когда я попытался изменить структуру initialValue из:

  initialValues: {
    rockSingers: [ "Axl Rose", "Brian Johnson"]
  }

к:

  initialValues: {
    rockSingers: [{ singer: "Axl Rose" }, { singer: "Brian Johnson" }]
  }

Первая проблема заключается в том, что теперь поле возвращает [object Object]. После отправки формы отображается правильный формат json, пока я не перейду к моей второй проблеме ... при добавлении нового значения, которое не соответствует формату данных initialValue - например,

{
  "rockSingers": [
    {
      "singer": "Axl Rose"
    },
    {
      "singer": "Brian Johnson"
    },
    "Tom Rudge"
  ]
}

Вот коды и ящик - https://codesandbox.io/s/8kzw0pw408

если вы не используете какой-либо вложенный FieldArray, вы можете указать начальное значение в формате массива initialValues: { rockSingers: [ "Axl Rose" , "Brian Johnson" ] }, все остальное будет работать как есть

— 26.11.2018 19:32

javascript reactjs react-redux redux-form

26.11.2018 17:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуй это:

const renderRockSingers = ({ fields }) => (
      <div>
        <h3>Rock Singers:</h3>
        {fields.map((rockSinger, index) => (
          <div>
            <Field
              name = {rockSinger}
              format = {value => value.singer}
              parse = {value => ({ singer: value })}
              key = {index}
              component = "input"
            />
          </div>
        ))}
        <button type = "button" onClick = {() => fields.push({ singer: '' })}>
          Add more
        </button>
      </div>
    );

26.11.2018 19:13

Ответ принят как подходящий

Измените renderRockSingers так, чтобы вы хватали объект, а не строку.

const renderRockSingers = ({ fields }) => (
  <div>
    <h3>Rock Singers:</h3>
    {fields.map((rockSinger) => (
      <div>
        <Field name = {`${rockSinger}.singer`} key = "index" component = "input" />
      </div>
    ))}
    <button type = "button" onClick = {() => fields.push()}>
      Add more
    </button>
  </div>
);

Подробнее о компоненте FieldArray здесь: полевые массивы

26.11.2018 19:20

<Field
  name = {rockSinger}
  key = {index}
  component = "input"
  format = {(value, name) => (value !== undefined ? value.singer : "")}
  normalize = {value => ({ singer: value })}
/>

Песочница кода: https://codesandbox.io/s/7m1p9600y0

Это хороший ответ, я использовал его для своего сценария, когда у меня были другие дела. Спасибо

— 27.11.2018 11:23

26.11.2018 19:37