Блог

Главная - Вопросы по программированию - Учитывая массив A, объедините его с массивом B внутри объекта React useState

Учитывая массив A, объедините его с массивом B внутри объекта React useState

#javascript #node.js #reactjs #react-hooks #use-state

#javascript #node.js #reactjs #реагирующие крючки #use-state

Вопрос:

  • Я реализую бесконечную прокрутку в React, и мне нужно вызвать внутренний API, чтобы получить содержимое для следующей страницы. Однако я установил useState как объект. И хотите обновить массив внутри объекта.
  • Я знаю, что это можно легко решить, установив результаты в качестве useState и создав дополнительные useState для «next» и «previous»; однако я хочу найти, как решить это с текущим условием.
  • Пожалуйста, также предложите, какой из них будет оптимальным (один useState<объект (пользовательский интерфейс)> или три useState для «результата», «следующего» и «предыдущего» по отдельности)

У меня есть перехват React useState, инициализированный данными, приведенными ниже

 {
    "count": 2,
    "next": 2,
    "previous": null,
    "results": [
   {
    'id': 1,
    'name': 'test1'
   },
   {
    'id': 2,
    'name': 'test2'
   }

   ]
}

и новые данные, которые я получаю, имеют вид

 data = {
    "count": 2,
    "next": null,
    "previous": 1,
    "results": [
   {
    'id': 3,
    'name': 'test3'
   },
   {
    'id': 4,
    'name': 'test4'
   }

   ]
}

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

 {
    "count": 2,
    "next": null,
    "previous": 1,
    "results": [
   {
    'id': 1,
    'name': 'test1'
   },
   {
    'id': 2,
    'name': 'test2'
   },
   {
    'id': 3,
    'name': 'test3'
   },
   {
    'id': 4,
    'name': 'test4'
   }

   ]
}

Комментарии:

1. Итак, чтобы уточнить, вы пытаетесь сохранить данные в results массиве, но обновить значения count , next , и previous и добавить новые данные в results массив?

2. Да, @GianinaSkarlett это правильно

Ответ №1:

Предполагая, что ваша переменная состояния была названа state , вы должны сделать что-то вроде этого:

 setState({
  ...state, 
  next: null, 
  previous: 1, 
  results: [
    ...state.results, 
    {
      'id': 3,
      'name': 'test3'
    },
    {
      'id': 4,
      'name': 'test4'
    }
  ]
})

Комментарии:

1. Спасибо @jordanjlatimer моей главной ошибкой было не использовать оператор распространения для данных « setState({ …state, next: null, previous: 1, results: [ …state.results, …data ] }) ` `

2. Если вы нашли мой ответ полезным, поддержите его и / или сделайте его принятым ответом.

Метки: