将 Fetch 与 React 组件一起使用

Question

I'm trying to use fetch to retrieve my data, and then setState to apply it in the componentDidMount. I'm getting the log that says the component mounted, anything after the Fetch, included the simple console logs are not working. Is there something simple wrong with my syntax? I have verified that the api does work.

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';


let policyContent = '';

class TinyEditor extends Component {
    constructor(props) {
        super(props);

this.state = { content: '' };

    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.handleClick = this.handleClick.bind(this);

}

componentDidMount() {
    console.log(`Component did mount`);
    fetch("/policy")
        .then(res => res.json())
        .then((result) => {
            console.log(result);
            console.log(`You got your results... now what?`);
            policyContent = result;
            console.log(policyContent[0]);
            this.setState({policyContent});
        });
}

handleEditorChange(content, editor) {
    this.setState({ content });
}

handleClick(e) {
    e.preventDefault();
    console.log(`Button was clicked.`);
    console.log(this.state.content);
}

render() {
    return (
        <div>
            <div className="container">
                <Editor
                    apiKey='yf9eajz93s3akrlb24b8ja9xcszddbxx22x4ug8c2q5boxw3'
                    className="mceEditor"
                    id='myTextArea'
                    init={{
                        height: 500,
                        editor_selector: 'mceEditor',
                        menubar: false,
                        browser_spellcheck: true,
                        contextmenu: true,
                        branding: false,
                        plugins: [
                            'advlist autolink lists link image charmap print preview anchor',
                            'searchreplace visualblocks code fullscreen',
                            'insertdatetime media table paste code help wordcount'
                        ],
                        toolbar:
                            'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
                    }}
                    onEditorChange={this.handleEditorChange}
                    value={this.state.content}
                />
                <button onClick={this.handleClick}>Save</button>
            </div>
        </div>
    )
}

}

export default TinyEditor;

Answer 1

I have run your code using a online api. every thing is working fine. Please replace the code of componentDidMount and check the output for testing.

componentDidMount() {
        console.log(`Component did mount`);
        fetch(`https://opentdb.com/api.php?amount=10&difficulty=hard&type=boolean`)
            .then(res => res.json())
            .then((result) => {
                console.log(result);
                console.log(`You got your results... now what?`);
                policyContent = result.results[0];
                console.log(policyContent);
                this.setState({content: policyContent.category});
            });
    }

Please check the output screen where the text of Editor is coming from api.