Reactjs - 如何从组件访问数据答案

【问题标题】：Reactjs - How do I access data from a componentReactjs - 如何从组件访问数据
【发布时间】：2019-08-01 03:53:34
【问题描述】：

让我先说明一下，我是一个初学者，并且有一个以表单形式保存数据的组件：

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"
    }
  }
...
}

我想访问一段数据并显示它。上面的过滤器基本上只显示类型正确的项目。

例如，每个商品都有一个与之关联的价格，我如何才能显示所有选定商品的总和？

【问题讨论】：

如果我理解正确，您想显示在主组件上选择的总项目。然后你需要在 main 的某个函数中设置逻辑。您需要一些增量变量来跟踪您设置的过滤器数量。例如：如果您单击红色和蓝色，则变量也应增加到 2。然后您可以显示在主组件上。

标签： javascript reactjs components

【解决方案1】：

你有一个很好的开始。您需要对您的 products 过滤列表使用 Array.prototype.reduce() 方法。一个简单的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

【讨论】：