При обновлении React с 15.1 до 16.13.1 (и других пакетов) this.props не определен. Как это работало раньше и что теперь поменять? - PullRequest
Новая
       36

При обновлении React с 15.1 до 16.13.1 (и других пакетов) this.props не определен. Как это работало раньше и что теперь поменять?

0 голосов
/ 07 мая 2020

Я работаю над приложением React, использующим 15.1. Мы хотим лучше держать все в курсе, поэтому я пытаюсь перейти на последнюю версию (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)

Я почти все обновил и знаю, что есть изменения в proptypes - он использовал это из React вместо prop-types. Когда я запускаю его сейчас, this.props не определено в методе render для NamesTable.js. Очевидно, это не передается от NamesPanel.js. API вызывается в NamesView.js.

Думаю, мой вопрос: извините за мое невежество, как это работало раньше? И что мне нужно изменить, чтобы он заработал сейчас?

Кажется, это что-то очевидное, и я не уверен на 100%, что искать.

Спасибо maten's help Я изменил этот бит в NamesTable.js. 

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

Кажется, сейчас работает.

1 Ответ

0 голосов
/ 07 мая 2020

Это может быть возможно из-за несоответствия версий response и response-dom, поэтому, пожалуйста, обновите react-dom.

Таким образом вы можете обновить свой response-dom: 

npm install react-dom@16.13.1
...