使用react-redux將屬性映射到屬性

如何通過react-redux connect方法訪問傳遞給組件的調度函數？如果我嘗試通過this.props訪問回調。該功能未找到。顯示以下錯誤：所需道具onDataUpdated在EditTable和類型錯誤未指定：this.props.onDataUpdated不是一個函數使用react-redux將屬性映射到屬性

ConsumerIDManagement.js

import { connect } from 'react-redux' 
var React = require('react'); 
var EditTable = require("../components/EditTable"); 

const ConsumerIDEditTable = connect(
    mapDispatchToProps 
)(EditTable) 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onDataUpdated: (oldRow,newRow) => { 
     dispatch({ oldRow: oldRow, newRow: newRow,type: "onRowUpdated"}) 
    } 
    } 
} 

<ConsumerIDEditTable data={this.state.data} editableColumns={["consumerID"]}/>

EditTable.js

var React = require('react'); 
var ReactDataGrid = require('react-data-grid'); 
var ResultFormatter = require("../components/ResultFormatter"); 

var EditTable = React.createClass({ 
    propTypes: { 
     onDataUpdated: React.PropTypes.func.isRequired 
    }, 
    ... 
    handleRowUpdated : function(e){ 
     var rows = this.state.rows; 

     // inform dispatcher of changed data 
     this.props.onDataUpdated(rows, e.updated); 
    }, 
    ... 
    }, 

    render:function(){ 
     return (
      <ReactDataGrid 
       ... 
       onRowUpdated={this.handleRowUpdated} /> 
     )  
    } 

}); 


module.exports = EditTable;

來源

2016-07-20 Martin Fahl

方法有以下簽名：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

[mapStateToProps(state, [ownProps]): stateProps] (Function)
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

你需要通過你的mapDispatchToProps功能爲第二參數

const ConsumerIDEditTable = connect(
    null, mapDispatchToProps 
)(EditTable)

更多信息在docs

在使用它之後，還聲明mapDispatchToProps和const。撥打connect的方法是undefined。 const和let沒有被吊裝到文檔的頂部，這意味着您在使用它們後無法定義它們。

const value1 = 'value1'; 
 
console.log(value1, value2) 
 
const value2 = 'value2';

來源

2016-07-20 13:20:09

把它當作第二個參數不利於常量ConsumerIDEditTable =連接（空，mapDispatchToProps ）（EditTable） –

您還聲明'mapDispatchToProps'與'const'使用後。 –

我建議你看如何通過丹阿布拉莫夫本人Redux: Generating Containers with connect()寫connect功能的視頻。他在描述如何創建連接功能以及如何以更合理和正確的方式構建您的應用程序方面做得非常好。這5分鐘的視頻應該指出你犯的錯誤，並解釋connect函數的工作原理。

來源

2016-07-20 13:38:20 anvk

使用react-redux將屬性映射到屬性

回答

相關問題