Question

我正在尝试在我的React项目中进行两次AJAX调用，并根据收到的数据进行UI渲染。这是我的渲染方法：

render() {
    if (this.state.examsLoaded) {
        return (
            <div>
                <Button onClick={this.openModal}>Details</Button>
                <Modal show={this.state.modalOpen} onHide={this.closeModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.props.course.name}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <DetailModalContent course={this.props.course} exams={this.exams} grades={this.grades}/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.closeModal}>Sluiten</Button>
                    </Modal.Footer>
                </Modal>
            </div>
        )
    }
    else {
        return (
            <div>Loading...</div>
        )
    }
}

render方法检查AJAX数据是否可用，如果没有，只需呈现'Loading ...'消息。这是获取数据的代码：

componentDidMount() {
    fetch('http://localhost:8080/course/' + this.props.course.id + '/exams').then((examResp) => {
        examResp.json().then((examData) => {
            this.exams = examData;
            console.log('Course data fetched'); // THIS APPEARS


            fetch('http://localhost:8080/user/1/grades').then((gradeResponse) => { // THIS DATA IS FETCHED
                console.log('Done fetching grades'); // THIS APPEARS
                gradeResponse.json((gradeData) => {
                    console.log('Parsed JSON'); // Here is where it goes wrong. This no longer appears.
                    this.grades = gradeData;

                    this.setState({
                        examsLoaded: true,
                        modalOpen: false
                    });
                });
            });
        });
    });
},

奇怪的是，我过去只有1个获取方法，一切都会正常工作。一旦我调用setState，组件就会重新呈现并显示数据。但是，在添加第二个之后，它不再起作用。查看我的console.log。一切正常，直到我解析JSON，之后，没有任何东西可以运行了。

我做错了什么？谢谢！

Answer 1

fetch的json（）方法返回一个promise。您在第一次调用中正确使用它，但第二次调用您将其视为函数而非承诺。

尝试

gradeResponse.json().then((gradeData) => {
  ...
});

Answer 2

您需要在componentDidUpdate中编写此逻辑。 componentDidMount仅在第一次触发。

请参阅React documentation.

可能你需要componentDidMount和componentDidUpdate。

componentDidMount() {
fetch('http://localhost:8080/course/' + this.props.course.id + '/exams').then((examResp) => {
    examResp.json().then((examData) => {
        this.exams = examData;
        console.log('Course data fetched'); // THIS APPEARS
                this.setState({
                    examsLoaded: true
                }); //At this point some state is changed, so componentDidUpdate will be triggered. Then in that function below, grades will be fetched and state is changed, which should call render again.

    });
  });
},

    componentDidUpdate(){
        fetch('http://localhost:8080/user/1/grades').then((gradeResponse) => { // THIS DATA IS FETCHED
            console.log('Done fetching grades'); // THIS APPEARS
            gradeResponse.json((gradeData) => {
                console.log('Parsed JSON'); // Here is where it goes wrong. This no longer appears.
                this.grades = gradeData;

                this.setState({
                    examsLoaded: true,
                    modalOpen: false
                });
            });
        });

  }

因为我现在不在应对环境。我会尽快更新。

React：AJAX调用后状态不会更新

2 个答案: