javascript - 高阶组件看不到道具

Question

我正在使用 react-native 和 redux。错误来自 redux 存储中的组件。之后，我收到： 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

这有什么问题？为什么 hoc 看不到道具？

我的组件：

import React, { Component } from 'react';
import withHandleError from './withHandleError';

class SendScreen extends Component {

  render() {
    const { error } = this.props;
    return (
    <div> Test </div>
    )
  }
};

const mapStateToProps = ({ppm}) => ({
  error: ppm.error
})


export default withHandleError(connect(mapStateToProps)(SendScreen));

和 HoC：

import React, { Component } from 'react';
import { ErrorScreen } from '../../ErrorScreen';
import { View } from 'react-native';

export default Cmp => {
  return class extends Component {
    render() {
      const {error, ...rest } = this.props;
      console.log(error)  //// undefined....
      if (error) {
        return <ErrorScreen />
      }

      return <Cmp { ...rest } />
    }
  }
}

标签： javascriptreactjsreact-nativereduxreact-redux

Answer 1

当您想要访问一个又一个提供的道具时，您称之为 HOC 的顺序很重要。重新订购您的 connect 和 withHandleError HOC 将起作用

import React, { Component } from 'react';
import withHandleError from './withHandleError';

class SendScreen extends Component {

  render() {
    const { error } = this.props;
    return (
    <div> Test </div>
    )
  }
};

const mapStateToProps = ({ppm}) => ({
  error: ppm.error
})


export default connect(mapStateToProps)(withHandleError(SendScreen));