陣營本地連接功能，不通過行動來子組件通過道具

我剛剛熟悉了終極版，並一直在讀，我應該通過應用程序的父母在行動創通，並通過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

陣營本地連接功能，不通過行動來子組件通過道具

回答

相關問題