javascript - 我正在使用 react-admin 依赖项,但编辑不起作用
问题描述
找了这么久,还是解决不了这个问题。
我按照他们提供的文档进行操作,但无法编辑信息!
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>
);
如果您需要更多信息,请询问我。谢谢你。
解决方案
我认为你对这个功能有很大的问题:
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
推荐阅读
- karate - 发送不带文件名的多部分文件
- xml - 如果使用powershell与我的key = value匹配,我想删除/删除xml中节点中的属性
- node.js - 如何与winston做相关ID?
- qt - QML Swipeview 动态添加和删除页面
- python - 使用带有 randint 的 for 循环
- vba - 如何在另一个字符串中找到正确的字符串
- javascript - 如何在我现有的统计算法中插入额外的标准?
- c++ - 如何在sqlite数据库中的c++中一次保存或更新多个表?
- python - 如何在 python 中永久保存列表?
- c# - 我想使用 Y 和 N 键盘按钮来确认对话框弹出