2

我是 React 新手，并尝试在 POST 请求返回错误时呈现错误消息。像这样的东西：

$.post({
    url: `/abc/xyz/`,
    cache: false,
    dataType: 'json',
    data: data,
    contentType: 'application/json; charset=utf-8',
    success: function (response) {
        ...
    },
    error: function (response) {    
        ReactDOM.render(
            <div>
                <p>response.statusText</p>
            </div>,
            document.getElementById('errorDialog')
        );
    }
});

但是，当我尝试运行它时，在控制台中我不断收到错误消息：

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

仔细检查显示问题出在ReactDOM.render错误回调内的行中。这不能在回调中使用吗？我尝试在外面使用它，但可能是由于回调函数的异步性质，它不起作用。有人知道我该如何解决这个问题吗？提前致谢！

4

2 回答 2

2

首先看起来你得到了Minified exception occurred错误，因为ReactDOM没有找到 id 的元素errorDialog，接下来你正在使用$.post而不是$.ajax基于你的设置...我建议你为 设置一个状态statusText并保存你得到的值那里。我为你准备了一个例子。ES6：

import React, { Component } from 'react';

export default class App extends Component {

  constructor() {
    super();
    this.state = {
      statusText: null
    };
  }

  componentDidMount() {
    $.ajax({
        type: 'POST'
        url: `/abc/xyz/`,
        cache: false,
        dataType: 'json',
        data: data,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
          console.log("$.post success", response);
        },
        error: function (response) {
          this.setState({
            statusText: response.statusText
          });
        }
    }.bind(this));
  }

  render() {
    const { statusText } = this.state;
    return (
      <div>
        <p>{statusText}</p>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('errorDialog'));
于 2016-09-05T21:21:13.883 回答
1

看起来你已经用 $.ajax 翻转了 $.post。您的函数格式适用于 $.ajax，而不是 $.post

http://api.jquery.com/jQuery.post/

于 2016-09-05T21:16:34.397 回答