我希望我的应用程序组件具有默认属性,并在中使用该属性 mapStateToProps。
mapStateToProps
import React, { Component, PropTypes } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import Footer from '../components/Footer'; import TreeNode from '../containers/TreeNode'; import Home from '../containers/Home'; import * as NodeActions from '../actions/NodeActions' export default class App extends Component { constructor(props, context) { super(props, context) this.props = { info:{ path:'/' } } } componentWillMount() { // this will update the nodes on state this.props.actions.openNode('/'); } render() { const { node , actions} = this.props console.log(this.props) return ( <div className="main-app-container"> <Home /> <div className="main-app-nav">Simple Redux Boilerplate</div> {node.childNodes && <div>{node.childNodes.map(node => <TreeNode key={info.path} info={node} tree={tree} actions={actions} />)}</div> } {!node.childNodes && <div>no children</div> } {/*<Footer />*/} </div> ); } } App.defaultProps = { info:{ path:'/' } }; function mapStateToProps(state, ownProps) { console.log('state') console.log(state) console.log('ownProps') console.log(ownProps) return { node: ownProps.info.path? state.TreeNodeReducer.tree[ownProps.info.path] : {} }; } function mapDispatchToProps(dispatch) { return { actions: bindActionCreators(NodeActions, dispatch) }; } export default connect( mapStateToProps, mapDispatchToProps )(App);
import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes'; import UUID from "node-uuid" const initialState = { open: false, info: {} } class NodeModel { constructor(path, type, right) { this.name = path; this.path = path; this.type = type; this.right = right; } } let lastId = 0; function getFileList() { var testNodes = [] for (var i=0; i< 3; i++) { testNodes.push(new NodeModel(lastId,'d', i.toString())) lastId++; } return testNodes } const getNodes = (state, action) => { var { path } = action var tree = state.tree ? state.tree : {} tree[path] = getFileList(path) return { ...state, tree:tree }; }; export default function (state = initialState, action) { switch (action.type) { case OPEN_NODE: return { ...getNodes(state, action), open:true }; case GET_NODES: return getNodes(state, action); case CLOSE_NODE: return { ...state, open:false }; default: return state; } }
我努力了 :
constructor(props, context) { super(props, context) this.props = { info:{ path:'/' } } }
App.defaultProps = { info:{ path:'/' } };
但它们都不起作用…日志始终为:
state具有正确的默认值,但ownProps为空…
state
ownProps
PS:项目在这里。
你做了两export default成App.js。
export default
App.js
尝试更改:
export default class App extends Component
至
const App = class App extends Component。
const App = class App extends Component
然后:
... App.defaultProps = { info:{ path:'/' } }; ... export default connect( mapStateToProps, mapDispatchToProps )(App);
作为mapStateToProps在部件施工前被调用(defaultProps被定义时),则ownProps是空的。您可以尝试两种选择:
1)解决方法:
App.defaultProps = { info: { path:'/' } } function mapStateToProps(state, ownProps) { console.log('state') console.log(state) console.log('ownProps') console.log(ownProps) const path = ownProps.info && ownProps.info.path ? ownProps.info.path : App.defaultProps.info.path; return { node: path ? state.TreeNodeReducer.tree[path] : {} }; }
2)显然,ownProps首次调用是由内联定义的props提供的。因此,您可以<App />在index.js:
<App />
index.js
<App info={{ path:'/' }} />
无论如何,解决此问题后,Cannot read property '/' of undefined尝试tree从化简器读取时(在那里不存在)会引发另一个错误()。
Cannot read property '/' of undefined
tree