函数作为 React 子级无效。如果您从渲染返回一个组件，则可能会发生这种情况

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 子级无效。如果您可能会发生这种情况 返回一个组件而不是从渲染中返回

[问题] 有人可以向我解释导致此错误的原因吗，因为有人投了反对票并写了一条评论说负责的代码不在这里（然后他删除了他的评论），因为该帖子太很长，如果将所有内容都粘贴在这里，因此寻找可以向我解释此错误的人）

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 }