AJAX调用不工作在React一旦我改变状态

AJAX call not working in React once I change state

本文关键字：改变 状态 React 调用 工作 AJAX      更新时间：2023-09-26

所以我现在在React中写一些明天到期的东西。我有一个组件，看起来像:

var PartOne = React.createClass({
getInitialState: function() {
    return {
        month: 1,
        day: 1,
        year: 2016,
        loading: false,
        res: '',
        count: 0
    };
},
_onSelectDay (option) {
    this.setState({day: option})
},
_onSelectMonth (option) {
    this.setState({month: option})
},
_onSelectYear (option) {
    this.setState({year: option})
},
onSubmit: function (e) {
    e.preventDefault();
    e.persist();
    $.ajax({
        url: '/partOne',
        dataType: 'json',
        type: 'POST',
        data: {
            month: this.state.month,
            day: this.state.day,
            year: this.state.year
        },
        success: function(data) {
            this.setState({res: data.res});
        }.bind(this),
      });
},
render: function() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                What is the total number of entries and exits across 
                &nbsp;
                <MonthSelector month={this.state.month} onSelect={this._onSelectMonth} />
                &nbsp;
                <DaySelector day={this.state.day} onSelect={this._onSelectDay} />
                &nbsp;
                <YearSelector year={this.state.year} onSelect={this._onSelectYear} />
                ?
                &nbsp;
                <button type="submit">Submit</button>
                <br />
                (The date must be between May 8, 2010, and September 16, 2016).
            </form>
            <div id="res">
                {this.state.res}
            </div>
        </div>
    )
}
});

如果我加载页面并点击提交，那么AJAX请求将通过。但是，如果我更改日期(从而更改状态)，然后点击提交，我会得到以下内容:

Uncaught TypeError: Cannot convert a Symbol value to a string

我不知道为什么会这样。我使用Chrome浏览器来查看我的页面，虽然我也可以在Safari中复制我的代码。下面是生成我的代码的HTML文件(react还有更多的内容，但屏幕上只有上面的组件)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MTA Turnstile Analyses</title>
</head>
<body>
     <div id="mount-point"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/jsx" src="{{ url_for('static', filename='scripts/app.js') }}"></script>
</body>

如果我需要提供额外的信息，请让我知道。我真的很感激你的帮助，因为我时间很紧。谢谢!

修改以下内容:

<MonthSelector month={this.state.month} onSelect={this._onSelectMonth(event.target.value)} />
&nbsp;
<DaySelector day={this.state.day} onSelect={this._onSelectDay(event.target.value)} />
&nbsp;
<YearSelector year={this.state.year} onSelect={this._onSelectYear(event.target.value)} />

像这样更改您的_onSelectDay, onSelectMonth和onSelectYear函数

_onSelectDay (e) {
    this.setState({day: e.target.value});
},
_onSelectMonth (e) {
    this.setState({month: e.target.value});
},
_onSelectYear (e) {
    this.setState({year: e.target.value});
},

代码:

var PartOne = React.createClass({
getInitialState: function() {
    return {
        month: 1,
        day: 1,
        year: 2016,
        loading: false,
        res: '',
        count: 0
    };
},
_onSelectDay (e) {
    this.setState({day: e.target.value});
},
_onSelectMonth (e) {
    this.setState({month: e.target.value});
},
_onSelectYear (e) {
    this.setState({year: e.target.value});
},
onSubmit: function (e) {
    e.preventDefault();
    e.persist();
    $.ajax({
        url: '/partOne',
        dataType: 'json',
        type: 'POST',
        data: {
            month: this.state.month,
            day: this.state.day,
            year: this.state.year
        },
        success: function(data) {
            this.setState({res: data.res});
        }.bind(this),
      });
},
render: function() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                What is the total number of entries and exits across 
                &nbsp;
                <MonthSelector month={this.state.month} onSelect={this._onSelectMonth)} />
                &nbsp;
                <DaySelector day={this.state.day} onSelect={this._onSelectDay} />
                &nbsp;
                <YearSelector year={this.state.year} onSelect={this._onSelectYear} />
                ?
                &nbsp;
                <button type="submit">Submit</button>
                <br />
                (The date must be between May 8, 2010, and September 16, 2016).
            </form>
            <div id="res">
                {this.state.res}
            </div>
        </div>
    )
}
});
相关文章：