“不能给无状态功能组件提供参考”是什么意思?

IT技术 javascript reactjs redux react-redux
2021-05-13 06:45:02

我有这个:

const ProjectsSummaryLayout = ({projects}) => {
   return (
      <div className="projects-summary col-md-10">
          <h3>Projects</h3>
          <ul>
              { projects.map(p => <li key={p.id}>{p.contract.client}</li>) }
          </ul>
      </div>
   )
}

const ProjectsSummary = connect(
   state => ({projects: state.projects})
)(ProjectsSummaryLayout)

我得到:

警告:不能为无状态功能组件提供参考(请参阅由 Connect(ProjectsSummaryLayout) 创建的 ProjectsSummaryLayout 中的参考“wrappedInstance”)。尝试访问此引用将失败。

它想告诉我什么?我真的做错了什么吗?

在这里看到了关于这个的讨论,但不幸的是我根本不明白这个结论。

2个回答

在 React 中,refs可能不会附加到无状态组件

React Redux 3将 a 附加ref到您给它的组件,无论是否是无状态的。您看到的警告来自 React,因为在内部,React Redux 3 将 a 附加ref到您提供的无状态组件 ( ProjectsSummaryLayout)。

您没有做错任何事情,根据此 GitHub 评论,您可以放心地忽略警告。

在 React Redux 4 中ref默认情况下没有附加到包装的组件,这意味着如果您升级到 React Redux 4,警告应该消失。

React 有 2 种常用的组件样式。

  • 功能组件
  • 类组件

所以,当我使用 Functional 时,我遇到了这个错误。 使用功能组件时遇到的错误

功能组件对应的代码片段

方形组件的代码

但是一旦我将其更改为类组件,它就起作用了。

有效

类组件对应的代码片段。

在此处输入图片说明

尝试将功能组件更改为类组件。我希望它能解决你的问题。