函数作为 React 子级无效。如果您从 render 返回 Component 而不是 <Component /> ，则可能会发生这种情况。如何解决这个问题

Question

我写了一个支付组件。

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);
    }
}

这是我的状态组件

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 />，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

回复被拒绝时

我该如何解决这个问题？

Answer 1

因为您在 Payment 中错误地实例化了 errMessage，所以您尝试在 StateText 中显示它会引发此错误。

将您的 errMessage 声明更改为类似于它上面的其他状态变量的声明，错误应该会消失。