类型无效——应为字符串(对于内置组件)或 class/function(对于复合组件)但得到:<div />
Type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />
我一直在尝试实现 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?
除部分外,一切正常。
我尝试了以下方法。
- 检查没有拼写错误
- 进出口错误
- 正在加载应用程序时替换字符串、“正在加载...”和“正在加载...”。
请帮帮我。
以下是我的代码
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();
导出时不执行SkeletonLoading
组件。
将SkeletonLoading.js
的最后一行替换为export default SkeletonLoading;
如果你执行组件,基本上它会导出函数/组件的return值。在本例中是 JSX 文字。
我一直在尝试实现 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?
除部分外,一切正常。
我尝试了以下方法。
- 检查没有拼写错误
- 进出口错误
- 正在加载应用程序时替换字符串、“正在加载...”和“正在加载...”。
请帮帮我。
以下是我的代码
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();
导出时不执行SkeletonLoading
组件。
将SkeletonLoading.js
的最后一行替换为export default SkeletonLoading;
如果你执行组件,基本上它会导出函数/组件的return值。在本例中是 JSX 文字。