Изменение реквизита (приставка) сбрасывает локальное состояние при использовании useState - обновлено - PullRequest
0 голосов
/ 22 сентября 2019

Я переписываю компоненты своего класса в функциональные компоненты.Один компонент использует Redux и local-state, и я заметил, что каждый раз, когда изменяется реквизит (состояние приставки), выполняется ловушка useState, сбрасывающая мое локальное состояние.Это ожидаемое поведение и как сохранить ваше локальное состояние?

старый (упрощенный)

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

новый

// Count gets reset to 0 every time reduxState changes
const MyComponent = ({reduxState}) => {

  const [count, setCount] = useState(0)

ОБНОВЛЕНИЕ - причина проблемыне в рефакторинге в функциональные компоненты.У меня есть родитель (Компонент высшего порядка), который воссоздает обернутый компонент при изменении состояния Redux.Для ясности вот несколько упрощенный HOC

import React, {useEffect} from 'react'
import { connect } from 'react-redux'

import { fetchObject } from '../actions/objects'
import { fetchIfNeeded } from '../utils'

const withObject = ({element}) => WrappedComponent => ({id, ...rest}) => {
  const Fetcher = ({status, object, fetchObject}) => {
    useEffect(() => {
      fetchIfNeeded(
        status,
        ()=>fetchObject(element, id),
      )
    })

    // THIS SECTION IS THE CAUSE OF MY PROBLEM
    // Handle loading and error status
    if (status && status.error) return <>error loading: {status.error.message}</>
    if (status === undefined || object === undefined || status.isFetching) return <>loading</>
    // END OF SECTION

    // Pass through the id for immediate access
    return <WrappedComponent {...{object, status, id}} {...rest} />
  }

  const mapStateToProps = state => ({
    object: state.data[element][id],
    status: state.objects[element][id]
  })

  const mapDispatchToProps = {
    fetchObject
  }

  const WithConnect = connect(mapStateToProps, mapDispatchToProps)(Fetcher)
  return <WithConnect/>
}

export default withObject

ОБНОВЛЕНИЕ2: Пример кода выше был обновлен, чтобы выделить проблемный раздел.Каждый раз, когда изменяется статус (например, isFetching: true), hoc возвращает другой компонент, чтобы отразить это.Когда он снова меняется на isFetching: false, новый экземпляр обернутого компонента создается и возвращается, теряя свое исходное состояние.

Короче говоря, возвращать разные компоненты изHOC в зависимости от состояния притока.Это должно быть обработано в обычном компоненте.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...