我试图将我的react-admin前端连接到firebase以执行crud操作。 我已使用 react-admin-firebase 包作为数据提供程序,它对于读取操作工作正常,但在创建帖子时,它在屏幕上显示为错误(服务器通信错误),并且
{status: 200, message: '', json: undefined} json: undefined message: "" status: 200 [[Prototype]]: Object
在控制台上。
App.js 文件
import React from "react"
import { Admin, Resource } from "react-admin"
import PostList from "./components/PostList"
import PostCreate from "./components/PostCreate"
import PostEdit from "./components/PostEdit"
import PostShow from "./components/Show"
import MyPostList from "./components/MyPosts"
import Grid from "./Grid";
import {
FirebaseDataProvider,
FirebaseRealTimeSaga
} from 'react-admin-firebase';
const config = {
apiKey: "xxxxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxxx",
measurementId: "xxxx"
};
const options = {};
const dataProvider = FirebaseDataProvider(config, options);
function App() {
return (
<Admin
dataProvider={dataProvider}
>
<Resource name="posts" list={PostList} create={PostCreate} show={PostShow} edit={PostEdit} />
<Resource name="myposts" list={MyPostList} create={PostCreate} show={PostShow} edit={PostEdit} />
<Resource name="gridView" list={Grid} create={PostCreate} show={PostShow} edit={PostEdit}/>
</Admin>
)
}
export default App
和 PostCreate.js 文件
import * as React from "react";
import {Create, SimpleForm, TextInput, DateInput, required } from 'react-admin';
import RichTextInput from 'ra-input-rich-text';
const phoneNumberFormat = (num) => {
let x;
if (typeof num !== "undefined") {
var pattern = new RegExp(/^[0-9\b]+$/);
if (!pattern.test(num)) {
x= "Please enter only number.";
}else if(num.length != 10){
x= "Please enter valid phone number.";
}
}
return x;
};
const validatePhone = [required("Phone number is required"), phoneNumberFormat];
const BodyWordLimit = (num) => {
let x;
if(num.length>1000)
{
x="You can write only 1000 characters in Description";
}
return x;
};
const validateBody = [required("Discription is required"), BodyWordLimit];
const TitleWordLimit = (num) => {
let x;
if(num.length>255)
{
x="You can write only 255 characters in Title";
}
return x;
};
const validateTitle = [required("Title is required"), TitleWordLimit];
const PostCreate = (props) => {
return (
<Create title='Create a Post' {...props}>
<SimpleForm>
<TextInput source="title" validate={validateTitle}/>
<RichTextInput multiline source="body" validate={validateBody}/>
<DateInput label="Publication date" source="published_at" defaultValue={new Date()} />
<TextInput source="phone" validate={validatePhone} />
</SimpleForm>
</Create>
)
}
export default PostCreate
有人可以帮忙吗?在过去的 2-3 天里我一直在拼命寻找修复方法......
我解决了这个问题,添加了 authProvider 并将日志记录配置设置为 true。
我不知道为什么它会这样
据我了解,创建、更新方法仅适用于 authProvider。 有人可以在没有 authProvider 的情况下使用它吗?