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

Question

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

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

我有一个这样的反应组件

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 }