阵营本地连接功能，不通过行动来子组件通过道具

我刚刚熟悉了终极版，并一直在读，我应该通过应用程序的父母在行动创通，并通过mapStateToProps，mapDispatchToProps和连接功能我应该可以通过操作。但是，当我调用子组件this.props。该函数不存在，所以它似乎没有被正确传递。阵营本地连接功能，不通过行动来子组件通过道具

我将不胜感激帮助。

注：我留下了一些东西像进口的减速更简洁。

export function login(token, id) { 
    console.log('login action'); 
    return { 
    type: 'LOG_IN', 
    token, 
    id, 
    }; 
}

index.ios.js：

import * as actionCreators from './actions/login' 

const store = createStore(RootReducer, undefined, autoRehydrate()); 
persistStore(store); 

class App extends Component { 
    constructor(props) { 
    super(props); 
    state = { 
     token: '', 
     id: '', 
     store: store, 
    }; 
    } 

    render() {  
    return (

    <Provider store={ state.store }> 
     <View style = {styles.container}> 
     <LoginView/> 
     </View> 
    </Provider> 
    ); 
    } 
} 

AppRegistry.registerComponent('App',() => App); 

function mapStateToProps(state) { 
    return { 
    token: state.token, 
    id: state.id 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({actionCreators}, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App);

loginView.js：

export class LoginView extends View { 

    static propTypes = {} 

    static defaultProps = {} 

    constructor(props) { 
    console.log(props); 
    super(props) 
    this.state = { 
     user: '', 
     token: '', 
     id: '', 
    } 
    this.onLogin = this.onLogin.bind(this); 
    } 

    onLogin() { 
    console.log("on login1"); 
    this.props.login({token: this.state.token, id: this.state.id}); 
    console.log("on login"); 
    }

，基本上会发生什么情况是，当onLogin（）函数直接在上面引发，它声明this.props.login不是函数。这是什么原因，我该如何解决它？

来源

2016-11-10 jkurs

要连接的应用程序组件，因此，将有this.props.onLogin()。但是，您不会将onLogin作为支柱传递给<LoginView />。您需要呈现<LoginView onLogin={this.props.onLogin} />，或者连接LoginView，并将onLogin作为该组件连接的一部分。

来源

2016-11-10 23:18:58 markerikson

谢谢你的回应。我用这个指南我的实现：https://medium.com/@MKulinski/react-redux-basics-a36914c0035d#.76dv77xlp 它使人们听起来像我不需要把它作为一个道具组件像你所说的那样。这不是这种情况吗？ – jkurs

是的，那篇文章的措辞很糟糕。 React组件不会神奇地获得道具 - 它们必须从某个地方传下去。 'connect'生成一个包装器组件，将数据道具和功能道具传递给你的“真实”组件。所以是的，无论是明确地将'onLogin'方法从'App'传递给'LoginView'，或者直接连接'LoginView'并在'mapDispatch'中给它'onLogin'。 – markerikson

此外仅供参考，我保持联系，以高品质的教程和文章的反应，终极版，以及相关主题，在https://github.com/markerikson/react-redux-links的大名单。很多很好的信息和例子从那里链接。 – markerikson

这条线：

return bindActionCreators({actionCreators}, dispatch);

应该是：

return bindActionCreators(actionCreators, dispatch);

“actionCreators” 已经是一个对象。通过将它传递给另一组花括号，它被解释为ES6速记属性名称的语法。你实际上传递的是一个看起来像这样的新对象：

{ 
    actionCreators: { 
    login: ... // your action is buried here 
    } 
} 

// ^^ which would get mapped to this.props.actionsCreators.login (wrong)

来源

2016-11-10 23:21:00

感谢您的回复。不幸的是，这并没有解决这个错误。你有什么其他的建议？ – jkurs

阵营本地连接功能，不通过行动来子组件通过道具

回答

相关问题