函数作为React子函数无效。如果从渲染中返回Component，则可能会发生这种情况

Question

[更新]在有人将此标记为重复之前，我发现答案有点模糊和简短

Functions are not valid as a React child. This may happen if you return a Component instead of from render

我有一个像这样的反应组件

import React, { Component} from 'react';
import axios from 'axios';
import Modal from '../../component/UI/modal/modal.js'
import Aux from '../Aux.js'

const ErrorHandler = (WrappedComponent, axios) => {
  return class extends Component {
      state = {
        error:null
      }

    componentDidMount () {
      axios.interceptors.request.use(req => {
        this.setState({error:null})
      });
      axios.interceptors.response.use(req => {
        console.log(req)
      }, error => {
        this.setState({error:error})
      });
    }

    errorConfirmedHandler = () => {
      this.setStae({error: null})
    }

    render() {
      return (
        <Aux>
          <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }
            {this.state.error ? this.state.error.message : null}
          </Modal>
        <WrappedComponent {...this.props} />
      </Aux>
      );
    }
  }
}

export default ErrorHandler;

这是我的模态组件，可能导致问题

import React, { Component } from 'react';
import Classes from './modal.css'
import Aux from '../../../HOC/Aux.js'
import Backdrop from '../Backdrop/backdrop.js'

class Modal extends Component {
  shouldComponentUpdate(nextProps, nextState) {

    return  nextProps.order !== this.props.order || nextProps.children !== this.props.children;
  }

  render () {
    console.log(this.props.children)
    return (
      <Aux>
      <Backdrop show={this.props.order} purchasingHandlerClose={this.props.purchasingHandlerClose} />
    <div className={Classes.Modal} style={{display: this.props.order ? 'block' : 'none'}}>
      {this.props.children}
    </div>
    </Aux> )
  }
}

export default Modal;

我在控制台中看到以下错误

函数作为React子函数无效。如果返回Component而不是render，则可能会发生这种情况

[问题]有人可以解释一下导致这个错误的原因是因为某人投票并写了一条评论说负责的代码不在这里（然后他删除了他的评论），因为如果将所有内容粘贴在这里因为帖子太长，那么找一个人可以解释我这个错误）

Answer 1

发现了错误

import React, { Component} from 'react';
import axios from 'axios';
import Modal from '../../component/UI/modal/modal.js'
import Aux from '../Aux.js'

const ErrorHandler = (WrappedComponent, axios) => {
  return class extends Component {
      state = {
        error:null
      }

    componentDidMount () {
      axios.interceptors.request.use(req => {
        this.setState({error:null})
      });
      axios.interceptors.response.use(req => {
        console.log(req)
      }, error => {
        this.setState({error:error})
      });
    }

    errorConfirmedHandler = () => {
      this.setStae({error: null})
    }

    render() {
      return (
        <Aux>
          <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }
            {this.state.error ? this.state.error.message : null}
          </Modal>
        <WrappedComponent {...this.props} />
      </Aux>
      );
    }
  }
}

export default ErrorHandler;

我应该做的

 <Modal
          order={this.state.error}
          purchasingHandlerClose={this.errorConfirmedHandler }>

但我偶然做到了这一点（请注意>）

 <Modal
          order={this.state.error}>
          purchasingHandlerClose={this.errorConfirmedHandler }