我正在使用react-admin依赖项，但是Edit无法正常工作

Question

我发现了很长时间，但无法解决这个问题。

我遵循了他们提供的文档，但是我无法编辑这些信息！react-admin未请求后端服务器。后端代码非常完美，我与邮递员进行了测试。

这是有问题的代码。

//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>
);

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

Answer 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