Reactjs 未定义React道具

我很难理解为什么我的props.updateBuilding无法工作

当道具在渲染方法中时，以下操作有效

class Buildings extends Component {
  constructor(props) {
      super(props);
  }

  componentWillMount() {
    this.props.fetchBuildings();
  }

  renderBuildings(building) {
    return (
      <div>
          <p> {building.name}</p>
      </div>
    );
  }


  render() {
    return (
      <div> 
        {this.props.buildings.map(this.renderBuildings)}
        <button type="button" className="btn btn-success" onClick={this.props.updateBuilding.bind(this, 1)}>Edit</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { buildings: state.buildings.all };
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({ fetchBuildings, updateBuilding}, dispatch);
}

我得到一个错误：

Cannot read property 'props' of undefined

---

当prop

updateBuildings

位于renderBuildings方法中时，它似乎无法被读取，我不确定是什么导致了这种情况

您错过了阅读此错误的机会<代码>道具未定义，调用的

道具

未定义，即

此

关键字。通过传入第二个参数，可以手动设置map函数的上下文

this.props.buildings.map（this.renderBuildings，this）

或者内联绑定

this.props.buildings.map（this.renderBuildings.bind（this））

试试：

this.props.buildings.map(this.renderBuildings.bind(this))

---

在我的例子中，我忘记将

props

作为参数添加到构造函数中

constructor(props) {
  super(props);
}

---

建议您不要直接在render或组件中除构造函数外的任何其他位置绑定函数。因为对于每个函数绑定，将在webpack bundle js文件中创建一个新函数/对象，因此捆绑包的大小将增加。您的组件将由于许多原因重新渲染，例如当您执行setState时，收到新的道具，当您执行此操作时。forceUpdate（）等。因此，如果您在渲染中直接绑定函数，它将始终创建一个新函数。相反，函数绑定总是在构造函数中进行，并在需要时调用引用。通过这种方式，它只创建一次新函数，因为每个组件只调用一次构造函数

在构造函数中绑定它们，并使用如下引用

constructor(props){
    super(props);
    this.renderBuildings = this.renderBuildings.bind(this);
}

this.props.buildings.map(this.renderBuildings)

---

不再推荐使用绑定内联。现在，您可以完全删除构造函数，而不是在组件上声明方法，您可以声明属性，并将其设置为arrow函数。这将把属性绑定到实例

特别要向韦斯·博斯致敬，因为他昨天在《初学者反应》课程中向我传授了这一点！：D超级泵实际上有助于堆栈溢出

renderBuildings = (buildings) => {
//this keyword is now available for use here
}

---

在执行todo教程时，我在使用功能组件的道具时也遇到了一些问题。当使用功能组件而不是类组件时，如果要使用道具，则必须从节点模块进行导入。将此行放在文件的顶部：

import props from 'prop-types';

然后，当您想在功能组件中使用道具时，首先需要将关键字作为该函数的参数传递。之后，您可以像在类组件中一样使用它，但不必使用关键字“this”：

function Todos(props) {
  console.log(props.todos);
  return (
    <div className="Todos">
        <h2>This is the Todos component</h2>
    </div>
  );
}

功能待办事项（道具）{
控制台日志（道具待办事项）；
返回(
这是Todos组件
);
}

扩展基类时就是这样。对导入的props变量进行阴影处理对我来说是个非常糟糕的主意。。。道具类型通常作为

道具类型导入，是一个完全不同的概念。它允许您为组件道具定义所需的类型，以帮助开发。参见道具类型文档。功能组件所需要做的就是将
props
定义为函数的参数（就像您所做的那样）。要做到这一点，您绝对不需要导入
“prop-types”
。
function Todos(props) {
  console.log(props.todos);
  return (
    <div className="Todos">
        <h2>This is the Todos component</h2>
    </div>
  );
}