找了这么久,还是没能解决这个问题。
我按照他们提供的文档操作,但我无法编辑信息!
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>
);
如果您需要更多信息,请问我。谢谢。
最佳答案
我认为你对这个功能有很大的疑问:
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
关于javascript - 我正在使用 react-admin 依赖项,但编辑不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59521132/