![](/img/trans.png)
[英]React is showing “Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render”
[英]Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render . how can fix that
我寫了一個支付組件。
import React, {useState, useEffect } from 'react';
import ProgressBar from "./ProgressBar";
import axios from "axios";
import Spinner from "./Spinner";
import State from "./State/State";
const Payment = props => {
const [loading, isLoading] = useState(true);
const [error, isError] = useState(false);
let errMessage = useState('');
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/todoss/1')
.then(response => {
if (response.status === 200) {
isLoading(false);
console.log(response.data);
} else {
throw new Error('Something went wrong');
}
}).catch((error) => {
console.log(error.message);
isError(true);
}).finally(() => {
isLoading(false);
});
}, []);
let state = null;
if (loading) {
state = <Spinner/>
}
if (error && !loading) {
state = <State isSuccess={false} stateText={errMessage}/>;
} else if (!error && !loading) {
state = 'Payment page';
}
return (
<>
<ProgressBar finalStep={false} activeIndex={0}/>
<div>
{state}
</div>
</>
);
};
export default Payment;
這是我的微調器組件
import React from 'react';
import './Spinner.css';
const Spinner = props => {
return (
<div className="orbit-spinner">
<div className="orbit"></div>
<div className="orbit"></div>
<div className="orbit"></div>
</div>
);
};
export default Spinner;
CSS
.orbit-spinner, .orbit-spinner * {
box-sizing: border-box;
}
.orbit-spinner {
height: 250px;
width: 250px;
border-radius: 50%;
perspective: 800px;
}
.orbit-spinner .orbit {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.orbit-spinner .orbit:nth-child(1) {
left: 0%;
top: 0%;
animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
border-bottom: 3px solid #ff1d5e;
}
.orbit-spinner .orbit:nth-child(2) {
right: 0%;
top: 0%;
animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
border-right: 3px solid #ff1d5e;
}
.orbit-spinner .orbit:nth-child(3) {
right: 0%;
bottom: 0%;
animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
border-top: 3px solid #ff1d5e;
}
@keyframes orbit-spinner-orbit-one-animation {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-two-animation {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes orbit-spinner-orbit-three-animation {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
這是我的 state 組件
import React from 'react';
import StateText from "./StateText/StateText";
import successImgSource from '../images/clipart1795386.png'
import rejectImgSource from '../images/PinClipart.com_syringe-clipart_316209.png';
const State = props => {
return (
<>
<StateText isSuccess={props.isSuccess} stateText={props.stateText}/>
<div>
{props.isSuccess ?
<img src={successImgSource} style={{width: '40px', height: '40px'}} alt="Success tick image"/> :
<img src={rejectImgSource} style={{width: '40px', height: '40px'}} alt="Reject cross logo"/>
}
</div>
</>
);
}
;
export default State;
這是我的 stateText 組件
import React from 'react';
import StateTextClasses from "./StateText.module.css";
const StateText = props => {
const classes = [StateTextClasses.stateText];
if (props.isSuccess) {
classes.push(StateTextClasses.success);
} else {
classes.push(StateTextClasses.reject)
}
return (
<h2 className={classes.join(' ')}>{props.stateText}</h2>
);
};
export default StateText;
CSS
.stateText {
line-height: 1.04;
margin-bottom: 30px;
}
.success {
color: lightgreen;
}
.reject {
color: indianred;
}
這是我的 app.js
import logo from './logo.svg';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import ProgressBar from "./ProgressBar";
import Payment from "./Payment";
function App() {
return (
<Router>
<div className="App">
<Payment />
</div>
</Router>
);
}
export default App;
我得到的警告是
函數作為 React 子級無效。 如果您從渲染返回一個組件而不是
<Component />
,則可能會發生這種情況。 或者,也許您打算調用此 function 而不是返回它。
當響應被拒絕時
我該如何解決?
因為您在 Payment 中錯誤地實例化了 errMessage,所以您嘗試在 StateText 中顯示它會引發此錯誤。
將您的 errMessage 聲明更改為類似於它上面的其他 state 變量的聲明,並且錯誤應該 go 消失。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.