Reactjs - как получить доступ к данным из компонента

Question

Позвольте мне предварительно определить это, поскольку я новичок, и у меня есть компонент, содержащий данные в форме:

const myList = ({products, add}) => {
  const component = products.map((product, index) => {
    return (
      <Item
        someData = {products[index].data}
        price = {products[index].price}
        ...
      />
    )
  })
  return (
    <div> {component} </div>
  )
}

В основном классе проекта я использую компонент myList для отображения различных элементов. В рендере основного я могу получить доступ, выполнив:

class Main extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      Items = [],
      basket[],
      ...
    }
...
  <myList
    products = {this.state.Items.filter((value, index, array) => {
      return this.state.Items[index].type === "some type"
    }
  }
...
}

Я хочу получить доступ к части данных и отобразить ее. Приведенный выше фильтр в основном отображает элемент, только если он имеет правильный тип.

Например, с каждым предметом связана цена, как я смогу отобразить сумму всех выбранных предметов?

Answer 1

Вы отлично начали.Вы захотите использовать метод Array.prototype.reduce() в своем фильтрованном списке products.Синтаксис простой функции reduce() выглядит следующим образом:

const reducer = (accumulator, currentValue) => accumulator + currentValue;

Таким образом, если вы зададите вопрос о сумме всех выбранных элементов , ваш вызов reduce() будет выглядеть следующим образом:

const basketTotal = products.reduce(reducer);

Или, если вы хотите сделать все это в одном выражении:

const basketTotal = products.reduce((a,c)=>a+c);

И это приведет к чему-то вроде этого:

const products = [{price: 22, name: 'something'},{price: 22, name: 'somethingelse'}];

const basketTotal = products.reduce((a,c)=>a.price + c.price);

console.log(basketTotal); // outputs 44