javascript - react native 连接功能不通过prop将 Action 传递给子组件

我刚刚熟悉redux，并且已经阅读到我应该通过应用程序的父级，mapStateToProps，mapDispatchToProps和connect函数传递动作创建者，我应该能够传递动作。但是，当我调用子组件this.props时。该函数不存在，因此似乎未正确传递它。

我将不胜感激。

注意：为简化起见，我省略了一些东西，例如进口和减速器。

login.js：

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不是函数。这是什么原因，我该如何解决？

最佳答案

您正在连接App组件，因此会有this.props.onLogin()。但是，您没有将onLogin作为道具传递给<LoginView />。您需要渲染<LoginView onLogin={this.props.onLogin} />，或者也连接LoginView，并将onLogin作为该组件连接的一部分。

关于javascript - react native 连接功能不通过prop将 Action 传递给子组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40538619/