等待调用后反应组件未正确呈现

Question

我有我在 themeforest.net 购买的 html 模板，我正在尝试将其转换为 webpack 并做出反应，现在一切正常，但是当我在 componentDidMount 中进行 await 调用时，页面没有正确呈现

let res = await axios({
method: "get",
url: "http://localhost:8080/api/main/mainProducts",
});

this.setState({ allProducts: res.data });

当我评论 await 调用时 并将状态设置为静态数据

let allProducts = [
{
//array data
},
]
this.setState({ allProducts: allProducts });

它的渲染正确。这是组件

export class MainComponent extends React.Component<{}, any> {
  constructor(props) {
    super(props);
    this.state = {
      allProducts: [],
    };
  }
  async componentDidMount() {
    let res = await axios({
      method: "get",
      url: "http://localhost:8080/api/main/mainProducts",
    });
    this.setState({ allProducts: res.data });
  }
  render(): any {
    return (
      <div className="product-4 product-m no-arrow">
        {this.state.allProducts.map((x) => (
          <div key={x.id} className="product-box product-wrap">
            <div className="img-wrapper">
              <div className="lable-block">
                <span className="lable3">new</span>{" "}
                <span className="lable4">on sale</span>
              </div>
              <div className="front">
                <a href={"/product/" + x.id}>
                  {x.images.map((image) =>
                    image.main.toString() === "true" ? (
                      <img
                        className="img-fluid blur-up lazyload bg-img"
                        key={image.id}
                        src={`/public/productImages/${x.id.toString()}/${
                          image.imageName
                        }`}
                      ></img>
                    ) : (
                      ""
                    )
                  )}
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
      // long html lines here 
      // ...
    );
  }
}

webpack 配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: path.join(__dirname, "src/index.tsx"),
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(svg|gif|jpg|png|eot|woff|woff2|ttf)$/,
        use: [
        'url-loader',
        ],
      },  
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.ts$/,
        use: ["ts-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
       filename: "./index.html",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
  ],
  output: {
    path: __dirname + "/dist/",
    filename:  "index.js",
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
    proxy: {
      "/api": {
        target: "http://localhost:5050",
        pathRewrite: { "^/api": "" },
      },
    },
  },
  mode: "development",
};

入口点 index.tsx

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { MainComponent } from "./views/user/main/main";
import { Bottom } from "./views/user/layout/bottom";
import { Top } from "./views/user/layout/top";
import "core-js/stable";
import "regenerator-runtime/runtime";

import "./helpers/css"; //css imports of the html template

render(
  <Router>
    <Switch>
      <Route path="/" exact>
        <>
          <Top />
          <MainComponent />
          <Bottom />
        </>
      </Route>
    </Switch>
  </Router>,
  document.getElementById("r")
);

import "./helpers/js"; //js imports of the html template

最重要的 css 和 js 导入

css.tsx

import "/public/assets/css/fontawesome.css";
import "/public/assets/css/slick.css";
import "/public/assets/css/slick-theme.css";
import "/public/assets/css/animate.css";
import "/public/assets/css/themify-icons.css";
import "/public/assets/css/bootstrap.min.css";
import "/public/assets/css/bootstrap4-toggle.min.css";
import "/public/assets/css/jquery.lazyloadxt.spinner.css";
import "/public/assets/css/color5.css";
import "/public/assets/css/site.css";

js.tsx

import "/public/assets/js/jquery-ui.min.js";
import "/public/assets/js/jquery.exitintent.js";
import "/public/assets/js/exit.js";
// @ts-ignore
window.Popper = require("/public/assets/js/popper.min.js");
import "/public/assets/js/slick.js";
import "/public/assets/js/menu.js";
import "/public/assets/js/lazysizes.min.js";
import "/public/assets/js/bootstrap.min.js";
import "/public/assets/js/bootstrap4-toggle.min.js";
import "/public/assets/js/bootstrap-notify.min.js";
import "/public/assets/js/fly-cart.js";
import "/public/assets/js/script.js";
import "/public/scripts/layout.js";

我怀疑它与光滑的库有关 我在 setstate 之后尝试过 import() slick js 和 css 文件，但它不起作用

this.setState({ allProducts: res.data }, () => {
      import("../../../../public/assets/css/slick.css");
      import("../../../../public/assets/css/slick-theme.css");
      import("../../../../public/assets/js/slick.js");
    });

我也试过重新导入整个 css 和 js 文件，但还是不行 我也尝试过很多其他的东西，比如使用 ajax 而不是 axios 但它给出了完全相同的错误我也试过这个

axios({
      method: "get",
      url: "http://localhost:8080/api/main/mainProducts",
    }).then((x) => {
      this.setState({ allProducts: x.data });
    });

这里没有等待，但它也有同样的错误。 正确渲染时的图片

错误的渲染

任何帮助将不胜感激。 谢谢！