Redux функция «connect» назначает неверное значение состояния в бесстатичном компоненте - PullRequest
Новая
       14

Redux функция «connect» назначает неверное значение состояния в бесстатичном компоненте

0 голосов
/ 02 мая 2019

Я пытаюсь передать некоторую подпорку компоненту без состояния для моих условных потребностей рендеринга.При назначении значения состояния избыточности моей переменной в connect(), например var: state.reducer.var, я не получаю объект «state.reducer.var».Вместо этого я получаю весь объект состояния.

Когда console.log(state.reducer.var) в connect () в качестве обратного вызова, я получаю ожидаемый результат - значение var.То есть, когда console.log(var) в качестве обратного вызова, передавая ему только что назначенную переменную, я получаю объект, который получаю, когда console.log(state).

В моем дочернем компоненте я получаю undefined, используя мою переменную какprops.var 

const _ProtectedRoute = ({ component: Component, ...rest }, props) => {
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...rest} />
      }
    </Fragment>
  );
}

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }, (isAuthed) => {console.log('state value: ', isAuthed)})
)(_ProtectedRoute);

Я ожидаю, что моя переменная, которой я назначил избыточное состояние, будет передана моему компоненту _ProtectedRoute без сохранения состояния в качестве реквизита, чтобы я мог использовать его в условном выражении.

Ответы [ 2 ]

0 голосов
/ 02 мая 2019

Моя нехватка знаний об аргументах функций была проблемой. Моя connect() функция была действительно функциональной (должна была сработать). Была проблема с приемом реквизита в моем дочернем компоненте. ({ component: Component, ...rest }) это уже "реквизит". ({ component: Component, ...rest }, props) означает, что я назначаю другой аргумент "props", который не определен. Таким образом, вместо преобразования component в Component для использования в качестве <Component /> в моей функции позже, это должно было быть сделано позже до return(). Это приводит к тому, что в качестве аргумента передаются реквизиты. Итак, мой дочерний компонент теперь может получать избыточное состояние в качестве реквизита от mapStateToProps().

P.S. Как отмечают несколько человек, вход в консоль connect() действительно неправильный, поскольку не является обратным вызовом. 

const _ProtectedRoute = props => {
  const Component = props.component;
  return (
    <Fragment>
      {!props.isAuthed
        ? <Redirect to="auth" noThrow />
        : <Component {...props} />
      }
    </Fragment>
  );
}

const mapStateToProps = (state) => ({
  isAuthed: state.user.isAuthed
});

const ProtectedRoute = connect(mapStateToProps, null)(_ProtectedRoute);
0 голосов
/ 02 мая 2019

Вы все делаете правильно, и все должно работать, как и ожидалось, но я заметил проблему с синтаксисом в вашем коде, должны быть закрывающие скобки после фигурных скобок в первом аргументе для подключения, также второй аргумент должен возвращать объект, что-то вродениже 

const ProtectedRoute = connect(
  (state) => ({
    isAuthed: state.user.isAuthed,
  }), (dispatch) => ({
      printAuth:(isAuthed) => {console.log('state value: ', isAuthed)}
  })
)(_ProtectedRoute);
...