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

Reactjs-如何从组件访问数据

1 个答案: