时间戳

首页 > 解决方案 > 通过从 useSelector Hook 返回的 Props 传递字符串值

reactjs - 通过从 useSelector Hook 返回的 Props 传递字符串值

问题描述

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

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

此行错误： const approvedUser: 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>
  );
};

标签： reactjsreact-hooks

解决方案

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

const approvedUser: string = selectedUser?.userName

以避免上述错误。

推荐阅读