在 React 中修复“index.js:1 警告：不建议在严格模式下使用 UNSAFE_componentWillReceiveProps，这可能表明代码中存在错误”

Question

我有这个更高阶的组件，它接收前一个志愿者的补偿和一个操作，然后呈现一个包含志愿者信息的表格：\n志愿者补偿代码：

\n

class Volenteer extends Component {\n    render() {\n        const title = \'\xd7\xa8\xd7\xa9\xd7\x99\xd7\x9e\xd7\xaa \xd7\x9e\xd7\xaa\xd7\xa0\xd7\x93\xd7\x91\xd7\x99\xd7\x9d\';\n        const mode = \'work\';\n        return (\n            <EntityTable \n                columns = {columns}\n                title = {title}\n                mode = {mode}\n                promiseProps = {this.props}\n            />\n        )\n    }\n}\n\nexport default WithEntity(Volenteer, requestVolunteerData() );\n

\n

HOC代码是：

\n

import React, {Component} from \'react\';\nimport { connect } from \'react-redux\';\n\nconst WithEntity = (EntityComponent, action) => {\n\n  const mapStateToProps = state => {\n    return {\n      isPending: state.requestEntitiesReducer.isPending,\n      entities: state.requestEntitiesReducer.entities,\n      error: state.requestEntitiesReducer.error\n    }\n  }\n  \n  const mapDispatchToProps = dispatch => {\n    return {\n      onRequestEntities: () => dispatch(action)\n    }\n  }\n\n  class WithEntity extends Component {\n    \n    componentDidMount () {\n      this.props.onRequestEntities();\n    }\n\n    \n\n    render() {\n      return (\n        <EntityComponent {...this.props} />\n      ) \n    }\n  }\n\n  return connect(mapStateToProps, mapDispatchToProps)(WithEntity);\n}\n\nexport default WithEntity;\n

\n

它工作正常，但我收到此警告：\n

\n

关于此有类似的问题，但没有找到解决方案，我也绑定了实现 componentDidUpdate 但它失败了。使用 componentDidMount 生命周期有问题吗？

\n

编辑： \n消息中提到的 DataProvider、FilterProvider 或 SortProvider 来自react-bootstrap-table-2 comp：

\n

const Table = ( {data, columns, mode} ) => {\n    <div className = \'table-responsive fixed word-wrap scroll mapping_table\'>\n      <BootstrapTable \n        bootstrap4\n        keyField={\'id\'}\n        data={data}\n        columns={columns} \n        responsive = {true}\n        condensed\n        hover\n        pagination={ paginationFactory()} \n        filter={ filterFactory() }\n        defaultSortDirection="asc"\n      />\n    </div>\n}\n \nexport default Table;\n

\n

这是组件列表的图片：\n

\n

Answer 1

这是组件中的一个已知问题react-bootstrap-table-2，与您粘贴的 HOC 代码无关。

您的选择是：

• 忽略警告并希望不会有任何问题
• 修复库以适应更现代的 React，并可能放入 PR
• 等待别人做工作
• 切换到另一个库