如何在 reactjs 中的 props 上使用 reduce()？

Question

我已经做了一个父组件和子组件（Piechart.js）。我像这样将 props 从父组件传递给 Piechart 组件 ->

 <Pie batdata={this.props.BattingRecord}/>

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

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

现在我想在dismissal 中获取how 参数，请参见上面的屏幕截图。我认为我没有正确访问道具。所以我在 Piechart 组件中尝试如下：

饼图.jsx：

  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 ;

对于上述代码，我收到类型错误：TypeError: Cannot read property 'batdata' of undefined

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方法中。