我正在使用 react-admin 依赖项，但编辑不起作用答案

【问题标题】：I am using a react-admin dependency, but the Edit is not working我正在使用 react-admin 依赖项，但编辑不起作用
【发布时间】：2019-12-29 16:20:49
【问题描述】：

找了这么久，还是解决不了这个问题。

我按照他们提供的文档进行操作，但无法编辑信息！
react-admin 没有向后端服务器请求。后端代码很完美，我用postman测试过。

这是有问题的代码。

//Admin.jsx
import React, { Component } from "react";
import { Admin, Resource, EditGuesser, fetchUtils } from "react-admin";
import restProvider from "ra-data-simple-rest";
import { UserList, UserEdit, UserCreate } from "../components/AdminPages/Users";
import userip from "public-ip";

const v4 = async () => {
  setTimeout(async () => {
    await userip.v4();
  }, 300);
};

const httpClient = async (url, options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: "application/json" });
  }
  // add your own headers here
  options.headers.set(
    "x-access-token",
    sessionStorage.getItem("token") || "null"
  );
  options.headers.set("x-access-userip", await v4());

  return fetchUtils.fetchJson(url, options);
};

const dataProvider = restProvider("http://localhost:4000/data", httpClient);

const AdminPage = () => (
  <Admin dataProvider={dataProvider}>
    <Resource
      name="users"
      list={UserList}
      edit={UserEdit}
      create={UserCreate}
    />
  </Admin>
);

export default AdminPage;

//Users.jsx
import React, { Component } from "react";
import {
  List,
  Datagrid,
  TextField,
  BooleanField,
  EditButton,
  ArrayField,
  SingleFieldList,
  ChipField,
  Edit,
  SimpleForm,
  TextInput,
  BooleanInput,
  ArrayInput,
  SimpleFormIterator,
  Create,
  translate,
  Toolbar,
  SaveButton,
  Update,
  DateField,
  DateInput
} from "react-admin";

export const UserList = props => (
  <List {...props} title="유저 정보">
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="credit" />
      <TextField source="point" />
      <TextField source="accumulatedAmount" />
      <TextField source="memberLevel" />
      <BooleanField source="isAdmin" />
      <ArrayField source="boughtProduct">
        <SingleFieldList>
          <ChipField source="product" />
        </SingleFieldList>
      </ArrayField>
      <EditButton />
    </Datagrid>
  </List>
);

const UserTitle = ({ record }) => {
  return <span>Post {record ? `"${record.id}"` : ""}</span>;
};

export const UserEdit = props => (
  <Edit title={<UserTitle />} {...props}>
    <SimpleForm>
      <TextInput source="id" />
      <TextInput source="name" />
      <TextInput source="credit" />
      <TextInput source="point" />
      <TextInput source="accumulatedAmount" />
      <TextInput source="memberLevel" />
      <BooleanInput source="isAdmin" />
      <ArrayInput source="boughtProdut">
        <SimpleFormIterator>
          <TextInput source="product" />
        </SimpleFormIterator>
      </ArrayInput>
    </SimpleForm>
  </Edit>
);

export const UserCreate = props => (
  <Create {...props}>
    <SimpleForm>
      <TextInput source="id" />
      <TextInput source="name" />
    </SimpleForm>
  </Create>
);

如果您需要更多信息，请咨询我。谢谢。

【问题讨论】：

我也有同样的问题。您是否碰巧找到了解决方案？
@HADMARINE ，找到任何解决方案了吗？我也遇到了同样的问题。

标签： javascript reactjs react-router react-admin

【解决方案1】：

我认为你对这个功能有很大的问题：

const v4 = async () => {
  setTimeout(async () => {
    await userip.v4();
  }, 300);
};

根据描述，它会返回给你timeoutID，而不是IP：

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

【讨论】：

【解决方案2】：

试试这个：

<Datagrid>

而不是

<Datagrid rowClick="edit">

在用户列表下。这就是为我解决的问题。

【讨论】：