如何正确添加Aside组件以在我的显示页面右侧创建一个模式样式按钮？

Question

我正在为个人客户构建自定义显示页面。在这个页面中，我需要一个按钮，允许我编辑他们的点值。我想使用在react-admin中构建的旁边组件，但我似乎无法让它正常工作。

我已经按照文档添加了旁边组件的代码，并将我的按钮组件放在其中。但是它根本不会呈现给页面。我收到了一个TypeError。 'TypeError：无法读取未定义的roperty“搜索”。

const Aside = (...props) => {
    const { customer_id: customer_id_string } = parse(props.location.search);

    const customer_id = customer_id_string ? parseInt(customer_id_string, 10) : '';
    return (
        <div style={{ width: 200, margin: '1em'}}>
            <Button 
            defaultValue={{ customer_id }}
            redirect="show"
            component={Link}
            to={{
                pathname: '/points/{{point-id}}/create',
            }}
            label="Add Points"
            >
                <Reward>Add Points</Reward>
            </Button>
            )
        </div>
    )

};

const CustomerShow = ({ classes, record, ...props }) => (
    <Show aside={<Aside />} {...props}>
        <TabbedShowLayout>
            <Tab label="Customer Basics">

            <TextField source="firstName"  /><TextField source="lastName" />
            <TextField source="email" />            
            <BooleanField source="active" />
            </Tab>
            <Tab label="The Rest">
            <NumberField label="Points" source="points" />
            <NumberField source="usedPoints" />
            <NumberField source="expiredPoints" />
            <NumberField source="lockedPoints" />
            <BooleanField source="agreement1" />
            <BooleanField source="agreement2" />

            </Tab>

            <Tab label="Transactions" resource="transactions" >
            <ReferenceManyField
                    addLabel={false}
                    reference="transactions"
                    target="customerId"
                    pagination={<Pagination />}
                    perPage={10}
                    sort={{ field: 'createdAt', order: 'DESC' }}
                ><Datagrid rowClick="show" >
                    <DateField source="createdAt"/>
                    <TextField source="documentNumber"/>
                    <TextField source="documentType"/>
                    <NumberField source="grossValue"/>
                    <NumberField source="pointsEarned"/>
                    <NumberField source="pointsUsed"/>
                </Datagrid>
                </ReferenceManyField>
            </Tab>
            <Tab label="Points" resource="Points" >
            <ReferenceManyField
                    addLabel={false}
                    reference="points"
                    target="customerId"
                    pagination={<Pagination />}
                    perPage={10}
                    sort={{ field: 'createdAt', order: 'DESC' }}
                ><Datagrid rowClick="show" >
                    <NumberField source="valueLocked" />
                    <NumberField source="valueUsed" />
                    <NumberField source="valueRemain" />
                    <NumberField source="valueExpired" />
                    <NumberField source="valueEarned" />
                </Datagrid>
                </ReferenceManyField>
            </Tab>
        </TabbedShowLayout>


    </Show>
);

预期结果是页面右侧显示“添加点”字样的按钮。实际结果是TypeError或页面渲染但没有按钮。

Answer 1

我弄清楚我做错了什么。我没有正确填写我的一个来源。它引用了错误的来源。