出现此错误的学校项目：渲染未返回任何内容。 这通常意味着缺少 return 语句。 或者，不渲染任何内容，返回 null

Question

我正在为学校开展一个项目，但我的代码的非渲染部分出现此错误。

fetchCharacterData = () => {
    var encodedURI = window.encodeURI(this.props.uri);
    return axios.get(encodedURI).then(response => {
        this.setState(() => {
            return {
                characterData: response.data
            };
        });
    });
};

读取this.setState(() => {我尝试了其他问题的建议，但似乎没有任何内容适用于这行代码。

componentDidMount() {
    this.fetchCharacterData();
    console.log("MOUNT");
}

render() {
    console.log(this.state.characterData);
    if (this.state.characterData.length === 0) {
       return <div>Failed to fetch data from server</div>;
    }
    const characters = this.state.characterData.map(character => {
       return <div key={character.name}><em>: {character.name}</em>: {character.class} </div>
    });
}

Answer 1

您需要在渲染函数中返回一些内容 - 该错误与您粘贴的代码无关。

class YourComponent extends React.Component {

    // ...

    fetchCharacterData = () => {
        var encodedURI = window.encodeURI(this.props.uri);
        return axios.get(encodedURI).then(response => {
            this.setState(() => {
                return {
                    characterData: response.data
                };
            });
        });
    };

    // ...

    // It's this part causing the error.
    // It either returns nothing, or doesn't exist.
    render() {
        return <div>Your page content</div> // or return null
    }
}

Answer 2

尝试像这样调整渲染功能。

render() {
    if (this.state.characterData.length === 0) {
       return <div>Failed to fetch data from server</div>;
    }
    const characters = this.state.characterData.map(character => {
       return <div key={character.name}><em>: {character.name}</em>: {character.class} </div>
    });
    /******************/
    return characters;
    /******************/
}