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

问题

I am trying to get Redux Form to work for the first time and I am getting the following error:

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

What am I doing wrong? The error is thrown as soon as I write (copy/paste from the example) the store.

Here is the code.

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);

I have also made a code sandbox that shows the issue: https://codesandbox.io/s/07xzolv60

回答1:

Just update to the latest version of redux-form (8.1.0). There is no need to downgrade.

回答2:

I had the same problem. Apparently redux-form doesn't work well yet with react-redux version greater then 6.

For me what helped is downgrading the react-redux package to version 5

npm install react-redux@5.1.1 --save

回答3:

While the above does work, if you'd like to use the latest, all you need to do is refactor your function component to a class component. Look for the withRef() API. (Please upvote this as the correct answer to help other devs.)

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

回答4:

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

The withRef option to connect has been replaced with forwardRef

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

回答5:

I don't advise downgrading react-redux instead I say you update both libraries to their latest versions and problem should be fixed. Kindly refer to Redux Form documentation on migrating from v6 to v8.

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

来源：https://stackoverflow.com/questions/53683186/error-withref-is-removed-to-access-the-wrapped-instance-use-a-ref-on-the-conne

标签

reactjs

redux

redux-form