محمود_سعداوي نشر 21 يونيو أرسل تقرير مشاركة نشر 21 يونيو السلام عليكم. أواجه مشكل في جلب البيانات من الخادم حيث لايتسنى إظهار هذه البيانات على الواجهة الأمامية إلا بعد تحديث الصفحة. الكود. إضافة كتاب (الواجهة الخلفية) // method POST // route api/books // desc Create new book // access Private | admin const createBook = asyncHandler(async(req, res) => { try{ // Image Validation if (!req.file) { return res.status(400).json({ message: "no image provided" }); } // Upload Photo const imagePath = path.join(__dirname, `../images/${req.file.filename}`); const result = await cloudinaryUploadImage(imagePath); // Save new post in database const book = await Book.create({ title: req.body.title, description: req.body.description, category: req.body.category, user: req.userId, image: { url: result.secure_url, publicId: result.public_id, }, author: req.body.author, language: req.body.language, PublicationDate: req.body.PublicationDate, }); // Send response to the client res.status(201).json(book); // 6. Remove image from the server fs.unlinkSync(imagePath); } catch (err) { console.log(err.message) res.status(500).send('Server error') } }); إضافة كتاب الواجهة الأمامية // bookSlice getBooks(state, action) { state.books = action.payload; }, setBooks(state, action) { state.books = [...state.books, action.payload] }, // bookApiCall export function addBook(newBook) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}`, newBook, { headers: { "authorization": getState().auth.user.accessToken } }); dispatch(bookActions.setBooks(data)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } /** * Add New Book */ const [fileName, setFileName] = useState(null); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [category, setCategory] = useState(""); const [author, setAuthor] = useState(""); const [PublicationDate, setPublicationDate] = useState(""); const [language, setLanguage] = useState(""); const formSubmitHandler = (e) => { e.preventDefault(); if (title.trim() === "") return toast.error("Book Title is required"); if (category.trim() === "") return toast.error("Book Category is required"); if (description.trim() === "") return toast.error("Book Description is required"); if (author.trim() === "") return toast.error("Book Author is required"); if (language.trim() === "") return toast.error("Book Language is required"); if (PublicationDate.trim() === "") return toast.error("Book Publication Date is required"); if (!fileName) return toast.error("Book Image is required"); const formData = new FormData(); formData.append("image", fileName); formData.append("title", title); formData.append("description", description); formData.append("category", category); formData.append("author", author); formData.append("language", language); formData.append("PublicationDate", PublicationDate); dispatch(addBook(formData)) setFileName(null) setTitle("") setDescription("") setCategory("") setAuthor("") setPublicationDate("") setLanguage("") }; /** * Fetch All Books With Pagination */ useEffect(() => { dispatch(fetchBooks()); }, [dispatch]); شكرا على المساعدة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 25 يونيو أرسل تقرير مشاركة نشر 25 يونيو حاول تحديث الواجهة مباشرًة بعد إضافة كتاب جديد، بدلاً من استخدام useEffect، أي كالتالي: export function addBook(newBook) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}`, newBook, { headers: { "authorization": getState().auth.user.accessToken } }); // هنا dispatch(bookActions.setBooks([...getState().books, data])); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أواجه مشكل في جلب البيانات من الخادم حيث لايتسنى إظهار هذه البيانات على الواجهة الأمامية إلا بعد تحديث الصفحة.
الكود.
إضافة كتاب (الواجهة الخلفية)
// method POST // route api/books // desc Create new book // access Private | admin const createBook = asyncHandler(async(req, res) => { try{ // Image Validation if (!req.file) { return res.status(400).json({ message: "no image provided" }); } // Upload Photo const imagePath = path.join(__dirname, `../images/${req.file.filename}`); const result = await cloudinaryUploadImage(imagePath); // Save new post in database const book = await Book.create({ title: req.body.title, description: req.body.description, category: req.body.category, user: req.userId, image: { url: result.secure_url, publicId: result.public_id, }, author: req.body.author, language: req.body.language, PublicationDate: req.body.PublicationDate, }); // Send response to the client res.status(201).json(book); // 6. Remove image from the server fs.unlinkSync(imagePath); } catch (err) { console.log(err.message) res.status(500).send('Server error') } });
إضافة كتاب الواجهة الأمامية
// bookSlice getBooks(state, action) { state.books = action.payload; }, setBooks(state, action) { state.books = [...state.books, action.payload] }, // bookApiCall export function addBook(newBook) { return async (dispatch, getState) => { try { dispatch(bookActions.setLoading()) const {data} = await axios.post(`${BOOK_URL}`, newBook, { headers: { "authorization": getState().auth.user.accessToken } }); dispatch(bookActions.setBooks(data)); dispatch(bookActions.clearLoading()); } catch (error) { toast.error(error?.response?.data.message); dispatch(bookActions.clearLoading()); } }; } /** * Add New Book */ const [fileName, setFileName] = useState(null); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [category, setCategory] = useState(""); const [author, setAuthor] = useState(""); const [PublicationDate, setPublicationDate] = useState(""); const [language, setLanguage] = useState(""); const formSubmitHandler = (e) => { e.preventDefault(); if (title.trim() === "") return toast.error("Book Title is required"); if (category.trim() === "") return toast.error("Book Category is required"); if (description.trim() === "") return toast.error("Book Description is required"); if (author.trim() === "") return toast.error("Book Author is required"); if (language.trim() === "") return toast.error("Book Language is required"); if (PublicationDate.trim() === "") return toast.error("Book Publication Date is required"); if (!fileName) return toast.error("Book Image is required"); const formData = new FormData(); formData.append("image", fileName); formData.append("title", title); formData.append("description", description); formData.append("category", category); formData.append("author", author); formData.append("language", language); formData.append("PublicationDate", PublicationDate); dispatch(addBook(formData)) setFileName(null) setTitle("") setDescription("") setCategory("") setAuthor("") setPublicationDate("") setLanguage("") }; /** * Fetch All Books With Pagination */ useEffect(() => { dispatch(fetchBooks()); }, [dispatch]);
شكرا على المساعدة.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.