Почему возникает ошибка при считывании данных из state?

Question

[dfv123]

https://codesandbox.io/s/zn73y6yylm

Answer 1

[Антон Спирин]

Опечатка и неправильное условие. Исправить можно так:

onChange = value => {
  const [from, to] = value;

  const filteredStudios = this.state.studios.filter(studio => 
    studio.price >= from && studio.price <= to
  );

  this.setState({
    studios: filteredStudios,
    from,
    to,
  });
};

Только вы перезаписываете отфильтрованный state поверх не отфильтрованного. Это тоже думаю неправильно.

Comments

[Антон Спирин]

dfv123, нет сохранять надо состояние фильтра. А в render просто фильтровать данные по фильтру. Фильтр это from и to

[Антон Спирин]

dfv123, вот так.

[dfv123]

Антон Спирин, понял, благодарю!

[dfv123]

Антон Спирин, скажите, в этом проекте стоит делать разделение на container/App со state и components/Select, Slider, List, Item или он настолько мал, что можно обойтись текущей структурой? Какой вариант с точки зрения правильного подхода будет лучше? (разделю сам)

[Антон Спирин]

dfv123, ну я сам не сторонник подхода File Type First:

/actions
/constrants
/reducers
/components
/containers
/lig
/blablabla

По мере роста с такой организацией, в исходном коде черт ногу сломит.
Куда лучше, с точки зрения организации, подход Feature First:

/common
  /components
    Button.js
    Select.js
    Row.js
  /ducks
  /utils
  /styles
  selectors.js
  constrains.js
  
/features
  /Filter
    Filter.js
    FilterContainer.js
    filterDucks.js
    filterSelectors.js
    index.js
  /ProductList.js
    /components
      Product.js
      index.js
    ProductList.js
    ProductListContainer.js
    productListDucks.js
    productListSelectors.js
    index.js
/pages
  Products.js
App.js
index.js
rootReducer.js
routes.js
store.js

Такая архитектура и поддерживается легче и хорошо масштабируется.