希望老师能够解答疑惑，谢谢！！
代码如下所示：一个问题是productList没有数据，还有一个问题是seterror(error.message);报错

import {
  Header1,
  Footer,
  SideMenu,
  Carousel,
  ProductCollection,
  BusinessPartners,
} from '../../Components';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { Row, Col, Typography, Spin } from 'antd';
// import { productList1, productList2, productList3 } from '../../mockup';
import sideImage from '../../assets/imgs/sider_2019_12-09.png';
import sideImage2 from '../../assets/imgs/sider_2019_02-04.png';
import sideImage3 from '../../assets/imgs/sider_2019_02-04-2.png';
import style from './Home.module.css';
interface State {
  loading: boolean;
  error: string | null;
  productList: any[];
}
export const Home: React.FC<State> = () => {
  let [loading, setloading] = useState(true);
  let [error, seterror] = useState(null);
  let [productList, setproductList] = useState([]);
  useEffect(() => {
    async function loadData() {
      try {
        const { data } = await axios.get(
          'http://123.56.149.216:8080/api/productCollections'
        );
        setloading(false);
        seterror(null);
        setproductList(data);
        console.log(productList);
      } catch (error) {
        if (error instanceof Error) {
          seterror(error.message);
          setloading(false);
        }
      }
    }
    loadData();
  }, []);
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '100%',
        }}
      />
    );
  }
  if (error) {
    return <div>网站出错：{error}</div>;
  }
  return (
    <>
      <Header1></Header1>
      <div className={style['page-content']}>
        <Row style={{ marginTop: 20 }}>
          <Col span={6}>
            <SideMenu></SideMenu>
          </Col>
          <Col span={18}>
            <Carousel></Carousel>
          </Col>
        </Row>
        <ProductCollection
          title={
            <Typography.Title level={3} type="warning">
              爆款推荐
            </Typography.Title>
          }
          sideImage={sideImage}
          products={productList[0].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="danger">
              新品上市
            </Typography.Title>
          }
          sideImage={sideImage2}
          products={productList[1].touristRoutes}
        />
        <ProductCollection
          title={
            <Typography.Title level={3} type="success">
              国内游推荐
            </Typography.Title>
          }
          sideImage={sideImage3}
          products={productList[2].touristRoutes}
        />
      </div>
      <BusinessPartners></BusinessPartners>
      <Footer></Footer>
    </>
  );
};