使用带有 React-Redux 连接的 HOC（高阶组件）答案

【问题标题】：Using a HOC (higher order component) with React-Redux connect使用带有 React-Redux 连接的 HOC（高阶组件）
【发布时间】：2018-09-14 14:34:21
【问题描述】：

我正在努力让使用更高阶的组件更加舒适，因此我正在重构应用程序。我有四个不同的组件，它们都重用相同的fetchData 请求，以及错误/加载条件。我的计划是将这些可重复使用的数据放入 HOC 中。我从 StackOverflow、Reddit、Github 等中尝试了许多不同的示例，但没有一个在我的特定情况下有效。

这是我的 HOC：

const WithDataRendering = WrappedComponent => props => {
class WithDataRenderingComponent extends Component {
    componentDidMount() {
    this.props.fetchData(url)
    }
    render() {
    if (this.props.hasErrored) {
        return (
        <p>
            Sorry! There was an error loading the items:{" "}
            {this.props.hasErrored.message}
        </p>
        )
    }

    if (this.props.isLoading) {
        return (
        <div>
            <Skeleton count={10} />
        </div>
        )
    }

    return <WrappedComponent {...this.props} />
    }
}
const mapStateToProps = state => {
    return {
    data: state.data,
    hasErrored: state.dataHasErrored,
    isLoading: state.dataIsLoading
    }
}

const mapDispatchToProps = dispatch => {
    return {
    fetchData: url => dispatch(fetchData(url))
    }
}
return connect(mapStateToProps, mapDispatchToProps)(
    WithDataRenderingComponent
)
}

export default WithDataRendering

这是我试图用 HOC 包装的一个组件：

export class AllData extends Component<Props> {
    render() {
        return (
        ...
        )
    }
}

const mapStateToProps = state => {
    return {
        data: state.data,
        hasErrored: state.dataHasErrored,
        isLoading: state.dataIsLoading
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchData: url => dispatch(fetchData(url))
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    WithDataRendering(AllData)
)

我在控制台中收到三个错误：

Warning: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

invariant.js:42 Uncaught Error: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

ReactDOMComponentTree.js:111 Uncaught TypeError: Cannot read property '__reactInternalInstance$24sdkzrlvvz' of null

我尝试过的其他一些技术在这个SO post 和这个gist 中。我试过使用compose 并没有使用它，没关系。我在这里真的很茫然。任何想法为什么这个 HOC 不能正确渲染？

另外，我不反对使用render props 作为解决方案，如果它更合适的话。我需要对这两种方法进行更多练习。

【问题讨论】：

我注意到的第一件事是你的 HOC 导出了 WithGoDataRendering，它没有在任何地方定义（你的意思是 WithDataRendering？）
抱歉，我在修改代码时打错了。我已经更正它以反映正确的名称
您需要将props => 参数删除到WithDataRendering，并且您目前在HOC 和compose 应用程序中都使用connect（尽管这可能不会导致任何错误）。只是简单地浏览了一下代码，所以可能还有一些其他问题。
你说得对，props => 是主要问题。稍后将发布更多详细信息。谢谢。
为题外话道歉，但这意味着什么：export class AllData extends Component<Props> {？我指的是 ' 旁边的 Component 语法。

标签： javascript reactjs redux react-redux higher-order-components

【解决方案1】：

按照 Oblosys 的建议，我可以通过删除 props => 参数来解决此问题。我还将 AllData 中的 export 语句重新配置为：

export default connect(mapStateToProps, mapDispatchToProps)(WithDataRendering(AllData))

因为我真的不需要在那里使用compose。

【讨论】：