Question

我使用ReacrScriptLoader将Stripe按钮作为反应组件。

然后这个按钮重新渲染，它会抛出错误：＆＃34; type.toUpperCase不是函数＆＃34;。

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="wrapper">
  </div>
</body>

<script src="/static/js/react/react.js"></script>
<script src="/static/js/react/JSXTransformer.js"></script>
<script type="text/jsx" src="/static/js/create_club/react-script-loader.js"></script>
<script type="text/jsx" src="/static/js/create_club/stripe_react_button.jsx"></script>
<script type="text/jsx" src="/static/js/create_club/main.jsx"></script>
</html>

stripe_react_button.jsx

var StripeButton = React.createClass({

mixins: [ReactScriptLoaderMixin],

getInitialState: function () {
    return {
        fee: this.props.initial['fee'],
        stripeHandler: null
    };
},
getScriptURL: function () {
    return 'https://checkout.stripe.com/checkout.js';
},

statics: {
    scriptDidError: false,
},

hasPendingClick: false,

onScriptLoaded: function () {
    var self = this;
    if (!this.state.stripeHandler) {

        this.state.stripeHandler = StripeCheckout.configure({
            key: 'pk_test_2IUKfHp95E94piDFVbAwygDF',
            email: self.props.initial['user_email'],
            token: function (token) {
            }
        });
        if (this.hasPendingClick) {
            this.showStripeDialog();
        }
    }
},
showLoadingDialog: function () {
},
hideLoadingDialog: function () {
},
showStripeDialog: function () {
    this.hideLoadingDialog();
    var fee_as_string = this.props.initial['fee'].toString();
    var description = "$" + fee_as_string.slice(0, 2) + "." + fee_as_string.slice(2)
    this.state.stripeHandler.open({
        name: 'Club Subscription',
        description: description,
        amount: this.props.initial['fee']
    });
},
onScriptError: function () {
    this.hideLoadingDialog();
    StripeButton.scriptDidError = true;
},
onClick: function () {
    if (StripeButton.scriptDidError) {
        console.log('failed to load script');
    } else if (this.state.stripeHandler) {
        this.showStripeDialog();
    } else {
        this.showLoadingDialog();
        this.hasPendingClick = true;
    }
},
render: function () {

    return <button className="btn btn-primary"
                     onClick={this.onClick}>Pay</button>;
}
});

main.jsx

var RedrawButton = React.createClass({
   getInitialState: function () {

    return {
        fee: 10000,

    }
},

handleRedrowButton: function (event) {
    this.state.fee = this.state.fee * 2;
    this.setState({});
},

render: function () {
    return <div>
        <button onClick = {this.handleRedrowButton}>Redraw</button>
        <StripeButton initial={{fee:this.state.fee}}/>
    </div>

}
})

function GeneratePage() {
     React.render(<RedrawButton/>, document.getElementById('wrapper'));
}

 GeneratePage();

如果单击“重绘”按钮，则会抛出错误：＆＃34; type.toUpperCase不是函数＆＃34;。

更新

堆栈追踪：

autoGenerateWrapperClass    @   react.js:9259
getComponentClassForElement @   react.js:13201
validatePropTypes   @   react.js:10502
ReactElementValidator.createElement @   react.js:10549
React.createClass.render    @   main.jsx:21
 ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext    @   react.js:6975
ReactCompositeComponentMixin._renderValidatedComponent  @   react.js:7002
wrapper @   react.js:13427
ReactCompositeComponentMixin._updateRenderedComponent   @   react.js:6932
ReactCompositeComponentMixin._performComponentUpdate    @   react.js:6912
ReactCompositeComponentMixin.updateComponent    @   react.js:6828
wrapper @   react.js:13427
    ReactCompositeComponentMixin.performUpdateIfNecessary   @   react.js:6725
ReactReconciler.performUpdateIfNecessary    @   react.js:14205
runBatchedUpdates   @   react.js:14955
Mixin.perform   @   react.js:16683
Mixin.perform   @   react.js:16683
assign.perform  @   react.js:14899
flushBatchedUpdates @   react.js:14979
wrapper @   react.js:13427
Mixin.closeAll  @   react.js:16756
Mixin.perform   @   react.js:16697
ReactDefaultBatchingStrategy.batchedUpdates @   react.js:9199
batchedUpdates  @   react.js:14914
ReactEventListener.dispatchEvent    @   react.js:10953

重绘条纹按钮＆＃34; type.toUpperCase不是一个函数＆＃34;

0 个答案: