Question

我是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中。这不能在回调中使用吗？我尝试在外面使用它，但可能由于回调函数的异步性质，它不起作用。有人知道如何解决这个问题吗？提前谢谢！

Answer 1

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

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

Answer 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'));

ReactDOM.render里面$ .post错误回调

2 个答案: