Error withRef 被移除。要访问包装的实例，请在使用 Redux Form 时在连接的组件上使用 ref

Question

我第一次尝试让 Redux Form 工作，但我收到以下错误：

Invariant Violation withRef is removed. To access the wrapped instance, use a ref on the connected component.

我做错了什么？一旦我写（示例中的 copy/paste）商店就会抛出错误。

这是代码。

import React from "react";
import ReactDOM from "react-dom";
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  form: formReducer
})

const store = createStore(rootReducer);


function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我还制作了一个显示问题的代码沙箱：https://codesandbox.io/s/07xzolv60

Answer 1

我遇到了同样的问题，显然 redux-form 在 react-redux 版本大于 6 时还不能正常工作。

对我来说有用的是将 react-redux 包降级到版本 5：

npm install react-redux@5.1.1 --save

Answer 2

虽然上面的方法确实有效，但如果您想使用最新的，您需要做的就是将 class 组件重构为函数组件。寻找 withRef() API。（请将此作为正确答案点赞以帮助其他开发者。）

https://redux-form.com/7.1.2/docs/api/fieldarray.md/#props-you-can-pass-to-code-fieldarray-code-

Answer 3

只需更新到最新版本的 redux-form (8.1.0)。无需降级。

Answer 4

https://github.com/reduxjs/react-redux/releases/tag/v6.0.0

用于连接的 withRef 选项已替换为 forwardRef

export default 
  connect(
    mapStateToProps,
    mapDispatchToProps, null, {forwardRef: true})(Component)

Answer 5

我不建议降级 react-redux，我建议您将两个库都更新到最新版本，问题应该得到解决。请参阅有关从 v6 迁移到 v8 的 Redux 表单文档。

https://redux-form.com/8.2.2/docs/MigrationGuide.md

Error withRef 被移除。要访问包装的实例，请在使用 Redux Form 时在连接的组件上使用 ref

Error withRef is removed. To access the wrapped instance, use a ref on the connected component when using Redux Form

reactjs

redux

redux-form