如何在reactjs中的props上使用reduce（）？

Question

我制作了一个父组件和子组件（Piechart.js）。我将道具从父组件传递到Piechart组件，如下所示 - ＆gt;

how

以上代码位于父组件中。现在我想从Piechart组件（子组件）中的props中提取数据。

当我在Piechart组件构造函数中尝试console.log（this.props）时，它在控制台中显示JSON数据。见下面的截图：

现在我想在dismissal中获取 import React, { Component } from 'react'; const wickets = this.props.batdata.reduce( (a,{dismissal}) =>{ <--Getting error at this line if(!a[dismissal.how]){ a[dismissal.how]=1; }else{ a[dismissal.how]=a[dismissal.how] + 1; } return a; }, {}); console.log(wickets); const dismissals = Object.values(wickets); const labels = Object.keys(wickets); //console.log(dismissals); //console.log(labels); class Pie extends Component { constructor(props){ super(props); console.log(this.props) } componentDidMount(){ const piechart = new Chartist.Pie('.ct-pie-chart', data, options, responsiveOptions); } render(){ return( <div> <div className="col-md-3 col-xs-6 ct-pie-chart"> {this.piechart} </div> </div> )} } export default Pie ; 参数，请参阅上面的屏幕截图。我想我没有正确访问道具。所以我在Piechart组件中尝试的内容如下：

Piechart.jsx：

TypeError: Cannot read property 'batdata' of undefined

对于上面的代码，我收到类型错误：{{1}}

Answer 1

问题是const wickets是在扩展Component的类之外分配的。您需要在class Pie的成员函数中移动此代码。 this.props只会在扩展Component。

的类中定义

class Pie extends Component {
    ...
    componentDidMount(){
        const wickets = this.props.batdata.reduce( (a,{dismissal})  =>{
            if(!a[dismissal.how]){
                a[dismissal.how]=1;
            }else{
                a[dismissal.how]=a[dismissal.how] + 1;
            }
            return a; 
        }, {});
        // Now you can use the value of "wickets" however you wish in this function

    this.piechart = new Chartist.Pie('.ct-pie-chart', data, options, responsiveOptions);
}

即使解决了这个问题，您也可能会遇到正在使用的饼图库的其他问题。如果它打算在React应用程序中使用，则不会以正确的方式呈现它。

Answer 2

问题在于您的Piechart组件。该错误非常自我解释，您的this.props未定义。如果没有Piechart组件的代码，则无法告知确切的问题，但是，有几个常见的错误可能会导致此错误：

• 您正在尝试访问未正确绑定的事件侦听器内的道具或

• 您正试图访问无状态功能组件中的this.props或

• 在调用super(props)之前，组件的构造函数内部。

已编辑：您正在访问this.props我们这方面的正确背景，您可能想了解this首先在JS中的工作方式：http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/。

要更正组件，可以在组件类中移动reduce函数，可以将其放在componentDidMount方法中。