Question

我写了下面的代码，而我的问题是提交后遇到了一些错误：

  Connect（ProductPage）中的
mapDispatchToProps（）必须返回纯文本   宾语。而是收到未定义的消息。

未捕获的TypeError：_this.props.submitProductRequest不是函数

我没有在下面的代码中弄错什么。

import React from 'react';
import { push } from 'connected-react-router';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { submitProductRequest } from './actions';
import { ProductDetailsActions, ProductDetailsType } from './types';
import Container from '../../components/Container';

interface DispatchProps {
  push: (path: string) => void;
}

interface Props extends DispatchProps, ProductDetailsActions {
  currencies: string;
  currencyCode: string;
  finalAmount: number;
  newFinal: number;
  exchangeRate: number;
}

interface State extends ProductDetailsType {}

class ProductPage extends React.Component<Props, State> {
  public state: State = {
    amount: null,
  };


  private handleSubmit = () => {
    const { currencyCode, amount, exchangeRate } = this.state;

    this.props.submitProductRequest({         
      amount,
    });
    this.props.push('/fulfillment');
  };

  render() {
    const { amount, exchangeRate } = this.state;

    return (


          <input
            id="quantity"
            name="quantity"
            type="text"
            value={this.state.amount || ''}
            onChange={this.qtyChange}
          />

        <button onClick={this.handleSubmit} type="button">
          Submit
        </button>

    );
  }
}


const mapStateToProps = (state: any) => {
   return {
     p: state.personalDetails,
   };
};

const mapDispatchToProps = (dispatch: any) =>{
  push: push;
  bindActionCreators({ submitProductRequest }, dispatch);
}

const withConnect = connect<DispatchProps>(
  null,
  mapDispatchToProps,
);

export default withConnect(ProductPage);

我想使用redux动作将数据输入值传递给另一个组件。另外，我们使用了React Boilerplate框架

Answer 1

我找到了一种方法，可以通过返回MapStatestoProps中的值（如建议的Clarity）来解决此问题。

感谢您的帮助。

Answer 2

您的mapDispatchToProps没有返回任何内容。

Answer 3

问题是您的mapDispatchToProps函数。您需要返回一个对象。

const mapDispatchToProps = (dispatch: any) => ({
  push: push,
  actions: bindActionCreators({ submitProductRequest }, dispatch);
})

，并且当您在组件中使用该操作时，就这样。...

this.props.actions.submitProductRequest()

以您的情况...

private handleSubmit = () => {    
    const { currencyCode, amount, exchangeRate } = this.state;
    this.props.actions.submitProductRequest({
        amount,
    });
    this.props.push('/fulfillment');
};

如何在React Js中解决路由器问题

3 个答案: