Эффективный setState свойств объекта?

Есть ли лучший способ написать это? Хотел бы setState(ContentStore.getAll()) сделать то же самое? Я думаю, что это выглядит излишне беспорядочно, и в любом случае упростить код для удобства чтения было бы здорово!

class Element extends Component {
 ...
   setContentState = () => {
     const {
      basename,
      bookmark,
      contents,
   } = ContentStore.getAll();

   this.setState({
     basename,
     bookmark,
     contents,
   });
 ...
}

}

Возвращает ли ContentStore.getAll() объект с любыми свойствами, которые вы не хотите отправить в setState?

CertainPerformance 10.09.2018 02:56

Это частный случай этот вопрос и не относится к React или setState.

Estus Flask 10.09.2018 03:21

@CertainPerformance Нет, меня устраивает, что все установлено в состояние. Стоит ли мне просто использовать this.setState(ContentStore.getAll())?

ms_nitrogen 10.09.2018 03:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
47
1

Ответы 1

Есть такая удобная функция:

const obj = {
  basename: 1,
  bookmark: 2,
  contents: 3,
  aaa: 4
}

const pick = (obj, keys) =>
  Object.assign({}, ...keys.map(key => ({ [key]: obj[key] })))

const picked = pick(obj, ['basename', 'bookmark', 'contents'])

console.info(picked)

Теперь вы можете:

const pick = (obj, keys) =>
  Object.assign({}, ...keys.map(key => ({ [key]: obj[key] })))

class Element extends Component {
 ...
   setContentState = () => {
    const data = ContentStore.getAll();
    const result = pick(data, ['basename', 'bookmark', 'contents'])

    this.setState(result);
    ...
  }
}

Или вы можете использовать функцию выбора из Лодаш или Подчеркивать.

Следует отметить, что существуют существующие функции pick, которые не нужно каждый раз писать с нуля или вставлять служебную функцию. В частности, Lodash / Underscore pick.

Estus Flask 10.09.2018 03:21

Другие вопросы по теме