Передача строкового значения через свойства, возвращаемые хуком useSelector - PullRequest
Новая
       55

Передача строкового значения через свойства, возвращаемые хуком useSelector

0 голосов
/ 14 июля 2020

Я работаю над ReactJS модальным диалоговым окном и привязываю значения из среза redux через ловушку useSelector. В настоящее время у меня есть две функции, которые уже отправляются с помощью хука useDispatch и устанавливают реквизиты с помощью 2 функций (onCancelHandler, submitHandler). Здесь мне нужно сохранить еще одно поле, которое является строковым значением (userName), и я попытался сохранить это и использовать строковое значение authorizedUser в DeleteUserModalContent через реквизиты. Первоначально я могу получить значение из props в компоненте DeleteUserModalContent, но при выполнении submitHandler возникает следующая ошибка.

Не удается прочитать свойство userName, которое не определено

Ошибка при этом line: const loadedUser: string = selectedUser.userName;

Может ли кто-нибудь сказать мне, что здесь не так?

Заранее спасибо

Фрагмент кода: 

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Modal } from '@material-ui/core';
import { AppState } from 'store/rootReducer';
import { hideModal } from 'store/common/modalSlice';
import { submitAction } from 'store/user-actions';
import { DeleteUserModalContent } from './DeleteUserModalContent';

export const DeleteUserModal: React.FC<{}> = () => {
  const dispatch = useDispatch();

  const selectedUser = useSelector((state: AppState) => {
    const selectedUserId =
      state.selectUserSlice.selectedUsers[0];
    return state.userState[selectedUserId];
  });

  const onCancelHandler = () => {
    dispatch(hideModal());
  };

  const submitHandler = () => {
    dispatch(
      submitAction(selectedUser.userName)
    );
  };

  const approvedUser: string = selectedUser.userName;
  console.log(selectedUser.userName);


  const props = {
    onResetHandler,
    submitHandler,
    approvedUser
  };

  return (
    <Modal>
      <>
        <DeleteUserModalContent {...props} />
      </>
    </Modal>
  );
};

1 Ответ

0 голосов
/ 16 июля 2020

Когда мы используем возвращаемое значение из ловушки useSelector и используем то же самое в другом компоненте DeleteUserModalContent, устанавливая в props. Здесь мы можем изначально использовать значение authorizedUser, но когда отправляется функция submitHandler, значение selectedUser.userName становится неопределенным, поэтому мы можем поставить проверку условия ниже: 

const approvedUser: string = selectedUser?.userName

, чтобы избежать вышеупомянутой ошибки.

...