类型无效--需要字符串(用于内置组件)或类/函数(用于组合组件)，但获得：<div />

Question

我一直在尝试实现React骨架，并收到了以下错误消息：

type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />. Did you accidentally export a JSX literal instead of a component?

除了部分，一切正常运转，没有任何问题。

我试过以下方法。

spelling

• mistakes

• 检查了导入和export

• Replacing以及字符串“loading.”中没有错误的和“装货.”在加载应用程序时显示。

请帮帮我。

以下是我的密码

Weather.js

import React, { useState } from "react";
import WeatherInfo from "./WeatherInfo";
import WeatherForecast from "./WeatherForecast";
import "./Weather.css";
import axios from "axios";
import "react-loading-skeleton/dist/skeleton.css";
import SkeletonLoading from "./skeletons/SkeletonLoading";

export default function Weather(props) {
  const [city, setCity] = useState(props.defaultCity);
  const [weather, setWeather] = useState({ ready: false });

  function showWeather(response) {
    setWeather({
      ready: true,
      coordinates: response.data.coord,
      city: response.data.name,
     
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    search();
  }

  function updateCity(event) {
    setCity(event.target.value);
  }
  function search() {
    let apiKey = ``;
    let units = "metric";
    let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=${units}`;
    axios.get(apiUrl).then(showWeather);
  }

  if (weather.ready) {
    return (
      <div className="container">
        <form onSubmit={handleSubmit}>
          <input
            className="input-window"
            type="search"
            onChange={updateCity}
          />
          <input className="search-button" type="submit" value="Search" />
        </form>
        <WeatherInfo data={weather} />
        <hr />
        <WeatherForecast coordinates={weather.coordinates} />
      </div>
    );
  } else {
    search();
    <SkeletonLoading />;
  }
}

SkeletonLoading.js

import Skeleton from "react-loading-skeleton";
import "./SkeletonLoading.css";

const SkeletonLoading = () => {
  return (
    <div>
      <div className="skeleton-one">
        <Skeleton count={1} />
      </div>
    </div>
  );
};

export default SkeletonLoading();

Answer 1

导出时不要执行SkeletonLoading组件。

将SkeletonLoading.js的最后一行替换为export default SkeletonLoading;

如果执行该组件，基本上它将导出函数/组件的返回值。在本例中，是一个JSX文字。