把React从15.1升级到16.13.1（还有其他包），this.props没有定义。以前是怎么工作的，现在要怎么改？

Question

我正在做一个使用15.1的React应用。我们希望能更好地保持更新，所以我正试图转移到最新的版本（16.13.1）。我对React的经验还是有些有限。下面是我正在使用的一个代表性的例子。

名称视图.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)

名称面板.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)

我几乎升级了所有的东西，我知道proptypes有变化--它一直在使用React的那个而不是prop-types。当我现在运行它时 this.props 中没有定义 render 方式 NamesTable.js. 很明显，这并不是来自传人的。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 [email protected]