javascript - 使用渲染 <Button/> 预填充 <Create> 记录会导致应用程序崩溃(react-admin)

Question

早上好。我正在使用react-admin(2.9.4)并面临问题: 我尝试预填充创建记录并使用自定义工具栏显示创建组件，但如果我使用 location.search为此我的应用程序崩溃了。

我使用与示例相同的结构

....
component={Link}
to={{
  pathname: '/comments/create',
  search: '?id=' + record.id,
}}
....

我的创建组件如下所示:

const ToolBar = (props) => (
  <Toolbar {...props}>
    <SaveButton />
    <Button />
  </Toolbar>
)


const MyCreate = props => (
  <Create {...props}>
    <SimpleForm toolbar={<ToolBar/>}>
      <TextInput source="title" />
      <TextInput source="summary" />
    </SimpleForm>
  </Create>
);

在这个组合中，我得到出了问题和警告，主要是关于无法识别的 Prop ，例如基本路径。

index.js:1437 Warning: React does not recognize the `basePath` prop on a DOM element.

如果我在工具提示中注释掉按钮，它就可以正常工作。 如果有人告诉我可能是什么问题，以及 location.search 如何影响 Button 的渲染，我将不胜感激。

非常感谢。

Answer 1

“预填充记录” https://marmelab.com/react-admin/CreateEdit.html

创建表单尝试获取给定格式的初始参数:

const CreateRelatedCommentButton = ({ record }) => (
    <Button
        component={Link}
        to={{
            pathname: '/comments/create',
            state: { record: { post_id: record.id } },
        }}
    >
        Write a comment for that post
    </Button>
);

如果你想使用你的搜索线来传递参数，你可以试试这个:

import { stringify } from 'query-string'

let search = stringify({
  myparams: JSON.stringify(
    {
      id: record.id, 
    })
})

要删除此警告，您需要实现按钮组件:

// ToolbarButton.js

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button } from 'react-admin'
import { withStyles, createStyles } from '@material-ui/core'

const styles = createStyles({
  button: {
    marginTop: '0em', 
  },
  iconPaddingStyle: {
    marginRight: '0.5em',
  },
})

const sanitizeRestProps = ({
  basePath,
  invalid,
  pristine,
  record,
  saving,
  submitOnEnter,
  handleSubmit,
  handleSubmitWithRedirect,
  ...rest
}) => rest

const ToolbarButton = ({ className, classes = {}, icon, ...rest }) => (
  <Button
    size="large"
    className={classnames(classes.button, className)}
    {...sanitizeRestProps(rest)}
  >
    { icon ? React.cloneElement(icon, { className: classes.iconPaddingStyle }) : null }
  </Button>
)