通过从 useSelector Hook 返回的 Props 传递字符串值答案

【问题标题】：Passing String value through Props returned from useSelector Hook通过从 useSelector Hook 返回的 Props 传递字符串值
【发布时间】：2020-07-14 18:44:09
【问题描述】：

我正在研究 ReactJS 模态对话框，并通过 useSelector 挂钩绑定来自 redux 切片的值。目前，我有两个函数已经使用 useDispatch 钩子进行调度，并使用 2 个函数（onCancelHandler、submitHandler）设置道具。在这里，我需要再保留一个字段，即字符串值（用户名）并尝试保留该字段并通过道具在 DeleteUserModalContent 中使用字符串值approvedUser。最初我能够从 DeleteUserModalContent 中的道具中获取值组件，但是执行 submitHandler 时出现以下错误。

无法读取未定义的属性“用户名”

这一行的错误： constapprovedUser: 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>
  );
};

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

当我们使用 useSelector 钩子的返回值并通过设置到 props 中的其他组件 DeleteUserModalContent 中使用相同的值时。这里我们最初可以使用approvedUser值，但是当submitHandler函数被调度时selectedUser.userName值变得未定义，所以我们可以在下面进行条件检查：

const approvedUser: string = selectedUser?.userName

为了避免上述错误。

【讨论】：