如何在 React admin 中编辑数组输入中的项目？

Question

我有一个包含对象的对象，每个对象都有一个项目数组，我想为每个对象附加一个编辑按钮，用于在 React-admin 中查看和删除，但是我的代码中的某些内容会失败，每次我按按钮一切都卡住了，您可以在此处的图片中看到： 谢谢！

当我按下此按钮时，网络卡住了：

代码中的按钮：

编辑部分：

数据：

import React from "react";
import {
  List,
  Datagrid,
  TextField,
  EmailField,
  EditButton,
  DeleteButton,
  Filter,
  TextInput,
  ReferenceInput,
  SelectInput,
  BulkDeleteWithConfirmButton,
  DeleteWithConfirmButton,
  ArrayField,
  ImageField,
  ShowButton,
  RefreshButton,
  CreateButton,
  ExportButton,
  NumberField,
} from "react-admin";
import { Fragment } from "react";

const UserBulkActionButtons = (props) => (
  <Fragment>
    <BulkDeleteWithConfirmButton {...props} />
  </Fragment>
);

const ShopList = (props) => {
  return (
    <List
      {...props}
      filters={<ShopFilter />}
      actions={<ProductActionsButtons />}
      bulkActionButtons={<UserBulkActionButtons />}
      style={{ width: "80%" }}
    >
      <Datagrid rowClick="show">
        <NumberField source="id" />
        <TextField source="title" />
        <ArrayField source="items">
          <Datagrid rowClick="edit">
            {" "}
            <TextField source="id" />
            <TextField source="name" />
            <TextField source="description" />
            <ImageField source="imageUrl" />{" "}
            <NumberField label="in Stock" source="amount" />
            <NumberField source="price" />
            <ShowButton label="" />
            <EditButton />
            <DeleteWithConfirmButton />
          </Datagrid>
        </ArrayField>
        <CreateButton />

        {/* <EditButton /> */}
      </Datagrid>
    </List>
  );
};

const ShopFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="q" alwaysOn />
    {/* <ReferenceInput label="Title" source="userId" reference="users" allowEmpty>
      <SelectInput optionText="name" />
    </ReferenceInput> */}
  </Filter>
);

const ProductActionsButtons = (props) => (
  <div>
    <RefreshButton {...props} />
    <CreateButton {...props} />
    <ExportButton {...props} />
  </div>
);

export default ShopList;

import React from "react";
import {
  Edit,
  ImageField,
  SimpleForm,
  TextInput,
  Datagrid,
  ArrayField,
  TextField,
  ImageInput,
  SimpleFormIterator,
  ArrayInput,
  Toolbar,
  SaveButton,
  DeleteWithConfirmButton,
  NumberInput,
  required,
} from "react-admin";

const ShopEdit = (props) => {
  return (
    <Edit {...props} title={<ShopTitle />} undoable={false}>
      <SimpleForm toolbar={<ProductEditToolbar />}>
        <TextInput disabled source="id" />
        <TextInput label="Category" source="title" validate={[required()]} />
        <ArrayInput source="items">
          <SimpleFormIterator>
            <TextInput
              label="Product Name"
              source="name"
              validate={[required()]}
            />
            <TextInput
              label="Product Description"
              source="description"
              validate={[required()]}
            />
            <ImageInput label="Product Image Url" source="imageUrl" />
            {/* <TextInput label="Product Price" source="price" /> */}

            <NumberInput min="0" step="1" label="in Stock" source="amount" />

            <NumberInput
              label="Product Price"
              min="0.01"
              step="0.01"
              source="price"
              validate={[required()]}
            />
          </SimpleFormIterator>
        </ArrayInput>
      </SimpleForm>
    </Edit>
  );
};

const ShopTitle = ({ record }) => {
  return <span>{record ? `Product "${record.name}"` : ""}</span>;
};

const ProductEditToolbar = (props) => (
  <Toolbar {...props}>
    <SaveButton />
    <DeleteWithConfirmButton />
  </Toolbar>
);

export default ShopEdit;

Answer 1

“它被卡住”是什么意思？你的“编辑”按钮背后有一些逻辑吗？检查控制台是否有可能的错误，如果可能的话与我们分享！

如你所见，我也在调试我损坏的React-Admin