将React从15.1升级到16.13.1(以及其他包)，this.procs未定义.它以前是如何工作的，现在我该做什么

Question

我正在开发一个使用15.1的React应用程序。我们想更好地保持最新情况，所以我试图转到最新版本(16.13.1(。我在React方面的经验仍然有限。这是我正在处理的一个具有代表性的样本。

NamesView.js

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { nameActions } from 'redux/modules/names'
import NamesPanel from 'containers/NamesPanel'
export class NamesView extends React.Component {
static propTypes = {
reportActions: PropTypes.object.isRequired
}
componentDidMount = () => {
const { nameActions } = this.props
nameActions.getNames()
}
render () {
return (
<NamesPanel />
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
nameActions: bindActionCreators(nameActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NamesView)

NamesPanel.js

import React from 'react'
import { connect } from 'react-redux'
import { Panel } from 'react-bootstrap'
import NamesTable from 'components/NamesTable'
export class NamesPanel extends React.Component {
static propTypes = {
}
render () {
return (
<Panel defaultExpanded collapsible header='Names'>
<NamesTable />
</Panel>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NamesPanel)

NamesTable.js

import React from 'react'
import PropTypes from 'prop-types'
import { reduxForm } from 'redux-form'
import { Table } from 'react-bootstrap'
export const fields = []
const validate = (values, props) => {
const errors = {}
return errors
}
export class NamesTable extends React.Component {
static propTypes = {
fields: PropTypes.object,
names: PropTypes.array,
valid: PropTypes.bool,
dirty: PropTypes.bool,
touchAll: PropTypes.func
}
render () {
const { names } = this.props
return (
<Table striped bordered>
<thead>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
{names.map((name, index) => {
return (   
<tr key={index}>
<td>{name.first}</td>
<td>{name.last}</td>
</tr>
)
})}
</tbody>
</Table>
)
}
}
const mapStateToProps = (state) => {
return {
names: state.names,
initialValues: {
names: state.names
}
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default reduxForm({
form: 'NamesTable',
fields,
validate,
touchOnChange: false
}, mapStateToProps, mapDispatchToProps)(NamesTable)

我几乎升级了所有东西，我知道道具类型有变化——它一直在使用React中的道具类型，而不是道具类型。当我现在运行它时，this.props在NamesTable.js的render方法中是未定义的。它显然不是从NamesPanel.js传下来的。该api在NamesView.js中被调用。

我想我的问题是，如果你能原谅我的无知，那以前是怎么回事？我现在需要改变什么才能让它发挥作用？

感觉这是显而易见的，我不100%确定该搜索什么。

---

多亏了maten的帮助，我在NamesTable.js中更改了这一位。

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form: 'NamesTable',
fields,
validate,
touchOnChange: false
})(NamesTable))

现在似乎在工作。

Answer 1

可能是因为react和react dom版本不匹配，所以请升级react dom。

这是你可以升级你的react dom的方法：

npm install react-dom@^16.13.1