Объединение объекта в массив в состоянии с помощью помощника неизменяемости обновления setState - PullRequest
Новая
       6

Объединение объекта в массив в состоянии с помощью помощника неизменяемости обновления setState

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

У меня проблемы со структурированием моего помощника по обновлению, и мне было интересно, знает ли кто-нибудь, как это настроить. Мое состояние выглядит следующим образом: 

state = {
        array: [
            {
                1: { thing1: 'thing1', thing2: 'thing2' },
            },
            {
                2: { thing1: 'thing1', thing2: 'thing2' },
            },
            {
                3: { thing1: 'thing1', thing2: 'thing2' },
            }
        ]
};

И я хочу взять объект и заменить на него указанную c позицию в массиве. Итак, что-то, что традиционно выглядит так: 

const newObj = {
     newthing1: 'newthing1',
     newthing2: 'newthing2'
};

state.array.splice(0, 1, newObj);

Прямо сейчас с помощью помощника immutability я получаю ошибку, что prevState.array не повторяется, когда я пытаюсь обновить его с помощью позиции индекса. Есть мысли?

Моя функция setState выглядит примерно так: 

this.setState((prevState) => ({
                array: update(...prevState.array[1], {$splice: { 2: { newthing1: 'newthing1' }}})
            }))

Спасибо!

Ответы [ 2 ]

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

Я не уверен, что это то, что вы пытаетесь сделать, потому что ваш пример setState, похоже, использует другие значения, чем ваш исходный .splice. Но я использовал ваш оригинальный сплайс в качестве примера для go off:

Для справки: https://reactjs.org/docs/update.html#nested -коллекций 

    state = {
            array: [
                {
                    1: { thing1: 'thing1', thing2: 'thing2' },
                },
                {
                    2: { thing1: 'thing1', thing2: 'thing2' },
                },
                {
                    3: { thing1: 'thing1', thing2: 'thing2' },
                }
            ]
    };

    const newObj = {
      newthing1: 'newthing1',
      newthing2: 'newthing2'
    };
    this.setState( prevState =>
      update(prevState, { array: { $splice: [[0, 1, newObj]] } })
    );

Честно говоря, это не так выглядит неправильно, потому что объекты противоречивы. Я предполагаю, что вы имели в виду это: 

update(prevState, { array: { $splice: [[0, 1, {1: newObj}]] } })

Или, если я go отклоню вашу попытку update, может быть, это? 

update(prevState, { array: { $splice: [[1, 1, {2: newObj}]] } })

Чтобы объяснить, что это делает:
Начиная с prevState объекта,
Сначала он обходит свойство array
Затем он перебирает список команд splice (в данном примере только 1)
Выполняет это соединение: 

 [
   1, // starting index to splice at
   1, // length to splice out
   {2: newObj} // object(s) to insert
 ]
0 голосов
/ 17 апреля 2020

Почему бы просто не использовать нативные методы. 

state = {
  array: [
      {
          1: { thing1: 'thing1', thing2: 'thing2' },
      },
      {
          2: { thing1: 'thing1', thing2: 'thing2' },
      },
      {
          3: { thing1: 'thing1', thing2: 'thing2' },
      }
  ]
};
const newObj = {
  newthing1: 'newthing1',
  newthing2: 'newthing2'
};
const index = 1 // could be any id

const newState = {array: state.array.slice(0, index).concat({[index]: newObj}).concat(state.array.slice(index+1))}
console.log(newState)
...