在删除之前，请使用确认对话框

Question

我想添加React-Admin一个确认消息，例如“您想删除项目吗？”。

因此，我尝试使用 ＆lt; deletebutton/＆gt;带有undoable = {false} 选项和 ＆lt; deletewithConfirmbutton/＆gt; component 。

但是他们俩都会遇到这样的错误。

unturect typeError：无法读取未定义的属性（阅读'tolowercase'）

在object.humanize（furnection.js：828：1）
在DeletewithConfirmbutton（DeletewithConfirmbutton.js：53：1）
在Renderwithhooks（react-dom.development.js：14803：1）。 。 。

问题

看起来像＆lt; deletewithConfirmbutton /＆gt; < /code>是一个问题。 （＆lt; deletebutton undoable = {false} /＆gt; < /code>还调用＆lt; deletewithConfirmbutton /＆

1. gt; < /code> in northly。 。

2. 他们调用fundection.humanize ＆lt;确认.. translateOptions = {} .../＆gt;。

3. fundection.humanize使用tolowercase（）方法，但是translateOption dose dose dose dose dove dast prospor string（resources。 } .name）。

4. 发生错误。

是否因为没有资源。$ {Resource} .Name在我的道具中发生吗？我该如何修复？

我的代码

const BottomToolbar = (props: EditActionsProps) => {

  return (
  // eslint-disable-next-line react/jsx-props-no-spreading
    <Toolbar {...props}>
      <SaveButton style={toolBarStyle} label="member.edit.editButton" />
      <DeleteButton label="member.edit.deleteButton" />
      <DeleteWithConfirmButton />
    </Toolbar>
  );
};

export interface EditActionsProps {
    basePath?: string;
    className?: string;
    data?: Record;
    hasCreate?: boolean;
    hasEdit?: boolean;
    hasList?: boolean;
    hasShow?: boolean;
    resource?: string;
}

// my props looks like this
record:
    firstSeenAt: t {seconds: 1502878077, nanoseconds: 0}
    groupId: "ldjapon18073hk"
    id: "pQ--------"
    lastSeenAt: t {seconds: 16000000, nanoseconds: 5700000000}
    managerId: "Me------"
    memberName: "xxx"
    totalTrainedTimeInSec: 37.882999999999996
redirect: "list"
resource: "members"

此代码是＆lt; deletewithConfirmbutton/＆gt;组件代码。

const {
        basePath,
        classes: classesOverride,
        className,
        confirmTitle = 'ra.message.delete_title',
        confirmContent = 'ra.message.delete_content',
        icon = defaultIcon,
        label = 'ra.action.delete',
        mutationMode,
        onClick,
        record,
        redirect = 'list',
        onSuccess,
        onFailure,
        ...rest
    } = props;
    const translate = useTranslate();
    const classes = useStyles(props);
    const resource = useResourceContext(props);
    const {
        open,
        loading,
        handleDialogOpen,
        handleDialogClose,
        handleDelete,
    } = useDeleteWithConfirmController({
        record,
        redirect,
        basePath,
        mutationMode,
        onClick,
        onSuccess,
        onFailure,
        resource,
    });
return (
        <Fragment>
            <Button
                onClick={handleDialogOpen}
                label={label}
                className={classnames(
                    'ra-delete-button',
                    classes.deleteButton,
                    className
                )}
                key="button"
                {...rest}
            >
                {icon}
            </Button>
            <Confirm
                isOpen={open}
                loading={loading}
                title={confirmTitle}
                content={confirmContent}
                /* Error occur here! */
                translateOptions={{
                    name: translate(`resources.${resource}.forcedCaseName`, {
                        smart_count: 1,
                        _: inflection.humanize(
                            translate(`resources.${resource}.name`, {
                                smart_count: 1,
                                _: inflection.singularize(resource),
                            }),
                            true
                        ),
                    }),
                    id: record.id,
                }}
                onConfirm={handleDelete}
                onClose={handleDialogClose}
            />
        </Fragment>
    );

这是furnection.js

**/**
   * This function adds humanize support to every String object.
   * @public
   * @function
   * @param {String} str The subject string.
   * @param {Boolean} low_first_letter Default is to capitalize the first letter of the results.(optional)
   *                                 Passing true will lowercase it.
   * @returns {String} Lower case underscored words will be returned in humanized form.
   * @example
   *
   *     var inflection = require( 'inflection' );
   *
   *     inflection.humanize( 'message_properties' ); // === 'Message properties'
   *     inflection.humanize( 'message_properties', true ); // === 'message properties'
   */
    humanize : function ( str, low_first_letter ){
      str = str.toLowerCase(); // Line 828 : Error Occur in here!
      str = str.replace( id_suffix, '' );
      str = str.replace( underbar, ' ' );

      if( !low_first_letter ){
        str = inflector.capitalize( str );
      }

      return str;
    },
**

Answer 1

我认为，因为您没有给DeletewithConfirmbutton提供道具，因此它

在您的代码中有错误：

const BottomToolbar = (props: EditActionsProps) => {

  return (
  // eslint-disable-next-line react/jsx-props-no-spreading
    <Toolbar {...props}>
      <SaveButton style={toolBarStyle} label="member.edit.editButton" />
      <DeleteButton label="member.edit.deleteButton" />
      <DeleteWithConfirmButton props={props}/>
      // In here, you need provider prop for DeleteWithConfirmButton component
    </Toolbar>
  );
};

Answer 2

对于在同一问题上挣扎的未来用户。

我在项目中使用```react-admin''：“ 3.13.4”。

deletewithConfirmbutton.proptypes 中没有，而且translateOptions也没有默认值。因此，我无法直接传递TranslateOptions，也没有默认值。这就是为什么我的错误发生。

值得庆幸的是，此错误已修复在v4.0.0.0中。我更新我的版本和＆lt; deletewithConfirmbutton /＆gt; < /code> works。