Я использую Реакт. Новое в React и nodejs.
Моему приложению требуется несколько раз, прежде чем он загрузит компонент, и это время тратится на загрузку ресурсов и проверку пользователя. В это время отображается только тот компонент, которому не нужно загружать данные с сервера.
Я хочу установить счетчик загрузки до тех пор, пока загрузка ресурсов не будет завершена. Я хочу сделать то же самое, когда удаляю данные или обновляю данные.
Вот мой компонент загрузки данных.
const useBook = (path, value) => {
const [products, setProducts] = useState([]);
const [product, setProduct] = useState({});
const [state, setState] = useState(false);
useEffect(() => {
const query = `${path}/${value} `;
const url = `http://localhost:5000/book/${path ? query : ""}`;
(async () => {
await axios.get(url).then((res) => {
// setProducts(res.data.result);
if (path !== "id") {
setProducts(res.data.result);
} else {
setProduct(res.data);
}
});
})();
}, [path, state, value]);
ответ на запрос:
{
"data": {
"result": [
{
"_id": "626cf32c0c39af8566524692",
"name": "Enjoy Your Life",
"description": "Short Description",
"price": 220,
"quantity": 28,
"supplier": "Maktabatul Azhar",
"image": "https://images-na.ssl-images-amazon.com/images/I/61mkMeByEJL.jpg"
},
{
"_id": "626cfcb26940e72778e26201",
"name": "Dont't Be Sad",
"description": "Short Description",
"price": 300,
"quantity": 90,
"supplier": "Maktabatul Asraf",
"image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
},
{
"_id": "626cfcd56940e72778e26202",
"name": "Dont't Be Sad",
"description": "Short Description",
"price": 250,
"quantity": 100,
"supplier": "Maktabatul Asraf",
"image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
},
{
"_id": "626cfcef6940e72778e26203",
"name": "La Tahjan",
"description": "Short Description",
"price": 320,
"quantity": 20,
"supplier": "Maktabatul Asraf",
"image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
},
{
"_id": "626cfd396940e72778e26204",
"name": "Hotash Hoben Na",
"description": "Short Description",
"price": 400,
"quantity": 50,
"supplier": "Hudhud",
"image": "https://dar-us-salam.com/2063-large_default/rp13-don-t-be-sad-hb.jpg"
},
{
"_id": "626cfde06940e72778e26205",
"name": "Don't Be Angry",
"description": "Short Description",
"price": 160,
"quantity": 0,
"supplier": "Kalantor",
"image": "https://www.kalantorprokashoni.com/wp-content/uploads/2017/06/Rag-Korben-Na-01.jpg"
}
]
},
"status": 200,
"statusText": "OK",
"headers": {
"content-length": "1367",
"content-type": "application/json; charset=utf-8"
},
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"env": {
"FormData": null
},
"headers": {
"Accept": "application/json, text/plain, */*"
},
"method": "get",
"url": "http://localhost:5000/book/limit/6 "
},
"request": {}
}
На стороне сервера я использую expressjs. Данные загружаются с локального сервера. И все данные для целей тестирования.
во-первых, вы создаете загрузочный компонент, туда вы помещаете загрузочный элемент, вы можете использовать загрузочный компонент начальной загрузки
после этого в вашем компоненте продуктов напишите,
if (products.length===0){ return <Loading></Loading> }
при загрузке всех продуктов.
Если приведенный выше ответ решил вашу проблему, вы должны поставить ему зеленую галочку. Но я думаю, что с приведенным выше ответом, если выборка завершена и в вашей базе данных нет данных, она будет загружаться навсегда, а не говорить «продукты не найдены».
@bgcodes, вы абсолютно правы. Я уже столкнулся с проблемой, о которой вы говорите. Но я справился другим способом. Спасибо за понимание.
У меня был загрузочный компонент. Я реализую это, используя вашу логику и ее работу. Спасибо за легкую и простую идею.