使用从反应-终极版CONECT this.props“缺失”方法(this.props 'm

https://codesandbox.io/s/6l8zr5k94k

为什么当我做this.props我只看到对象，但不是功能？ 但this.props.approveItem是存在的，这太奇怪了。

import React, { Component } from "react";
import { connect } from "react-redux";
import { approveItem } from "./actions";

@connect(state => state.items, { approveItem })
export default class Items extends Component {
  render() { 
    console.log('where is approveItem?', this.props);
    console.log('approveItem is here', this.props.approveItem);
    return (
      <div>
        <div>status: {this.props.item.status}</div>
        <button onClick={() => this.props.approveItem()}>Approve </button>
      </div>
    );
  }
}

Answer 1:

我不知道你是失踪，但运行代码并打印出到底是什么 props ，并显示预期的行动：

编辑
我想我知道为什么你的时候你记录它看不到的功能。
您正在寻找在console代码沙箱应用程序，这可能是做一个系列化的props对象。
问题是， 功能不序列化，能 。

从文档：

函数是不是一个有效的JSON数据类型，所以他们将无法正常工作。 然而，它们可以被显示，如果第一转换为字符串

您可以运行下面的代码来看看如何JSON.stringify例如，没有序列化对象内部的功能。

 const obj = { someKey: 'some Value', someFunc: function() {} }; console.log(JSON.stringify(obj)); 

FYI：你并不需要创建一个内联函数箭头传递下来的onClick事件，你可以通过通过参考props 。

因此，改变这种：

<button onClick={() => this.props.approveItem()}>Approve </button>

为此：

<button onClick={this.props.approveItem}>Approve </button>

Answer 2:

approveItem功能是提供this.props

this.props.approveItem()

this.props始终是一个对象，永远不会成为一个功能，试想如果我们必须道具多种功能，我们可以有多种功能，只有当this.props是对象。 不可能的，如果this.props本身的功能。

眼看this.props对象的方法。 请看控制台- https://codesandbox.io/s/xpy0lmolr4

文章来源: this.props 'missing' method using conect from react-redux