Лучшее использование условного рендера с SetState (React Native) - PullRequest
Новая
       21

Лучшее использование условного рендера с SetState (React Native)

0 голосов
/ 06 сентября 2018

Я отображаю список продуктов в соответствии с определенным значением. Я выполняю рендеринг с использованием компонента Picker, и когда он отличается от 306, я загружаю выбранные продукты, но ЕСЛИ я возвращаюсь к первому PickerItem (306), я хочу снова показать ВСЕ продукты ... Например: 

if (Value != '306') {
        this.setState({
            // isAll: false,
            labels,
            Colours: Value,
            filteredProducts: this.state.displayProducts.filter(product => product.colour == Value)
        }, () => {
            this.onLoadFilteredLabels();
        });
    } else {
        this.setState({
            // isAll: true,
            Colours: Value,
            displayProducts: this.state.products,
            displayLabels: this.state.labels
        });
    }

Я ищу какой-нибудь совет, если есть лучший способ сделать это? Как вы думаете, я должен отделить каждый setState? Это работает, но у меня есть ощущение, что это немного сложно, и я все еще учусь. Так что я знаю, что у меня могут быть полезные советы с людьми здесь!

Спасибо

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Самый простой подход - создать пользовательский объект для установки состояний и просто передать аргументы в пользовательском методе, помимо использования ternary: 

let stateObj = value === '306' ? {obj : {
            // isAll: true,
            Colours: Value,
            displayProducts: this.state.products,
            displayLabels: this.state.labels
        }, func : () => {
            return false;
        }} : {obj : {
            // isAll: false,
            labels,
            Colours: Value,
            filteredProducts: this.state.displayProducts.filter(product => product.colour == Value)
        }, func : () => {
            this.onLoadFilteredLabels();
        }}

this.stateSetter(stateObj);

Далее определите свой пользовательский метод: 

stateSetter = (stateObj) => {
  let {obj, func} = stateObj; 
  this.setState(obj,func);
}
0 голосов
/ 06 сентября 2018

Как правило, это нормально, если у вас есть несколько вызовов setState() в разных ветвях условия.

Но в вашем случае лучше обновлять только в состоянии Colours и фильтровать продукты непосредственно внутри метода render: 

render() {
  const {products: allProducts, Colours} = this.state;
  const displayProducts = Value != '306' ? allProducts.filter(product => product.colour == Colours) : allProducts;

  return (
    <div>
      {displayProducts.map(product => <YourProductComponent key={product.id} product={product}/>)}
    <div>
  );
}

В документации React рекомендуется, чтобы, если вы можете рассчитать требуемые данные из состояния и / или реквизита, вы должны сделать это вместо введения новой реквизита или переменной состояния.

PS: есть общая рекомендация не ссылаться на this.state в setState(). React запускает setState в пакетном режиме, так что вы можете обратиться к устаревшему состоянию. Вы должны передать функцию в качестве первого аргумента setState. Подробнее здесь .

0 голосов
/ 06 сентября 2018

Вы можете использовать троичный оператор, проверку на равенство и т. Д., Чтобы ваш код выглядел чистым. Например, 

this.setState({
  isAll: Value === '306',
  filterProducts: Value === '306' ? [yourFilterProducts] : [] 
});
...