Javascript 组件作为类编写而不是呈现

我的React组件没有渲染，我不确定原因。当我将组件作为函数编写时，它呈现得很好，但当我将其转换为一个类（我需要它作为一个类，以便能够正确获取.json数据）时，页面返回空白。我不知道我在哪里搞砸了

Landing.jsx

import React, { Component } from "react";
import Container from '@material-ui/core/Container';
import Navigation from "components/Navigation";
import Grid from '@material-ui/core/Grid';

class Landing extends Component {
    state = {
        categories: []
    };

    async componentDidMount() {
        try {
            const url = "/api/site/categories";
            const options = {
                method: "GET",
                Accept: "application/json",
                "Content-Type": "application/json",
            };
            const response = await fetch(url, options);
            const categories = await response.json();
            this.setState({
                categories
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <Container>
                <Navigation />
                <Grid container spacing={1}>
                    {this.state.categories.map(category => (
                    <Grid item xs={12} sm={4}>
                        <Box bgcolor="primary.main" color="primary.contrastText" p={2}>
                            <span>{category.title}</span>
                        </Box>
                    </Grid>
                ))}               
                </Grid>
            </Container>            
        );
    }
}

export default Landing;

import React from "react";
import { Route, BrowserRouter as Router, Switch, Link } from "react-router-dom";
import Landing from "components/Landing";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Landing />
        </Route>
      </Switch>
    </Router>
  );
}

import React，{Component}来自“React”；
从“@material ui/core/Container”导入容器；
从“组件/导航”导入导航；
从“@material ui/core/Grid”导入网格；
类扩展组件{
状态={
类别：[]
};
异步组件didmount（）{
试一试{
const url=“/api/site/categories”；
常量选项={
方法：“获取”，
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
};
const response=等待获取（url、选项）；
const categories=wait response.json（）；
这是我的国家({
类别
});
}捕获（e）{
控制台日志（e）；
}
}
render（）{
返回(
{this.state.categories.map（category=>(
{category.title}
))}               
);
}
}
导出默认着陆；

App.jsx

import React, { Component } from "react";
import Container from '@material-ui/core/Container';
import Navigation from "components/Navigation";
import Grid from '@material-ui/core/Grid';

class Landing extends Component {
    state = {
        categories: []
    };

    async componentDidMount() {
        try {
            const url = "/api/site/categories";
            const options = {
                method: "GET",
                Accept: "application/json",
                "Content-Type": "application/json",
            };
            const response = await fetch(url, options);
            const categories = await response.json();
            this.setState({
                categories
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <Container>
                <Navigation />
                <Grid container spacing={1}>
                    {this.state.categories.map(category => (
                    <Grid item xs={12} sm={4}>
                        <Box bgcolor="primary.main" color="primary.contrastText" p={2}>
                            <span>{category.title}</span>
                        </Box>
                    </Grid>
                ))}               
                </Grid>
            </Container>            
        );
    }
}

export default Landing;

import React from "react";
import { Route, BrowserRouter as Router, Switch, Link } from "react-router-dom";
import Landing from "components/Landing";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Landing />
        </Route>
      </Switch>
    </Router>
  );
}

从“React”导入React；
从“react Router dom”导入{Route，BrowserRouter as Router，Switch，Link}；
从“组件/平台”导入平台；
导出默认函数App（）{
返回(
);
}

我唯一能想到的是，async componentDidMount（）无法解析fetch调用的承诺。尝试将其更改为.then（），而不是等待

import React, { Component } from "react";
import Container from '@material-ui/core/Container';
import Navigation from "components/Navigation";
import Grid from '@material-ui/core/Grid';

class Landing extends Component {
    state = {
        categories: []
    };
    componentDidMount() {
        try {
            const url = "/api/site/categories";
            const options = {
                method: "GET",
                Accept: "application/json",
                "Content-Type": "application/json",
            };
            fetch(url, options).then((response)=>{
            return response.json()}).then((json)=>{this.setState({categories: json});
        } catch (e) {
            console.log(e);
        }
    }
render(){
          return (
            <Container>
                <Navigation />
                <Grid container spacing={1}>
                    {this.state.categories.map(category => (
                    <Grid item xs={12} sm={4}>
                        <Box bgcolor="primary.main" color="primary.contrastText" p={2}>
                            <span>{category.title}</span>
                        </Box>
                    </Grid>
                ))}               
                </Grid>
            </Container>            
        );
    }
}
export default Landing;

import React，{Component}来自“React”；
从“@material ui/core/Container”导入容器；
从“组件/导航”导入导航；
从“@material ui/core/Grid”导入网格；
类扩展组件{
状态={
类别：[]
};
componentDidMount（）{
试一试{
const url=“/api/site/categories”；
常量选项={
方法：“获取”，
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
};
获取（url，选项）。然后（（响应）=>{
返回response.json（）}），然后（（json）=>{this.setState（{categories:json}）；
}捕获（e）{
控制台日志（e）；
}
}
render（）{
返回(
{this.state.categories.map（category=>(
{category.title}
))}               
);
}
}
导出默认着陆；

您可以对功能组件执行相同的操作

import React, { Component, useState, useEffect } from "react";
import Container from '@material-ui/core/Container';
import Navigation from "components/Navigation";
import Grid from '@material-ui/core/Grid';

const Landing = ()=> Component {
   const [categories, setCategories] = useState([]);
       useEffect(()=>{  
        try {
            const url = "/api/site/categories";
            const options = {
                method: "GET",
                Accept: "application/json",
                "Content-Type": "application/json",
            };
            fetch(url, options).then((response)=>{
                return response.json()}).then((json)=>{setCategories(json);
        } catch (e) {
            console.log(e);
        }
    },[]);
            return (
            <Container>
                <Navigation />
                <Grid container spacing={1}>
                    {this.state.categories.map(category => (
                    <Grid item xs={12} sm={4}>
                        <Box bgcolor="primary.main" color="primary.contrastText" p={2}>
                            <span>{category.title}</span>
                        </Box>
                    </Grid>
                ))}               
                </Grid>
            </Container>            
        );
    }

export default Landing;

import React，{Component，useState，useffect}来自“React”；
从“@material ui/core/Container”导入容器；
从“组件/导航”导入导航；
从“@material ui/core/Grid”导入网格；
常量着陆=（）=>组件{
const[categories，setCategories]=useState（[]）；
useffect（（）=>{
试一试{
const url=“/api/site/categories”；
常量选项={
方法：“获取”，
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
};
获取（url，选项）。然后（（响应）=>{
返回response.json（）}）；
}捕获（e）{
控制台日志（e）；
}
},[]);
返回(
{this.state.categories.map（category=>(
{category.title}
))}               
);
}
导出默认着陆；

您是否检查了控制台中的错误？您确信

const categories=await response.json（）；

是一个数组？只是检查了控制台（忘记我可以这样做），是的，有一个错误，但我不知道它指的是什么。我必须提出另一个问题，lol。

必须提出另一个问题，

您可以编辑您的问题以添加错误消息。最终得到了一个类似于第二个条目的解决方案，因为React挂钩只能用于函数类。谢谢！