Ошибка сбоя страницы из-за задержки данных
Я столкнулся с проблемой, и я много думаю, но не могу найти какое-либо решение, пожалуйста, помогите. Примечание: я удалил некоторый HTML-код, потому что знаю, что проблемы не было. Итак, сначала давайте объясним, в чем проблема. потребуется время, чтобы разрешить первоначально, когда я впервые создал его, он не давал ошибку, загрузка становится истинной, а загрузочный компонент отображается, как только загрузка становится ложной, я могу получить доступ к переменному продукту, а затем отображать данные из него ... но через некоторое время я просто добавить функцию входа в систему, и я даже не коснулся этой страницы, что происходит сейчас, пока значение продукта и загрузки не будет разрешено, значение обеих переменных не определено, я нахожу его с помощью console.info() с помощью
import React,{useEffect} from "react";
import { getSingleProduct } from '../action/productAction'
import { useSelector,useDispatch } from 'react-redux'
import { Link } from "react-router-dom";
import { change_img } from "./main";
import { useParams } from "react-router-dom";
const ProductPage = () => {
const dispatch = useDispatch();
const {product,loading} = useSelector(state => state.productDetail)
let { id } = useParams();
console.info("The data of the product is",product)
console.info("The value of the laoding ",loading)
useEffect(()=>{
dispatch(getSingleProduct(id));
},[dispatch,id]);
var iloading =true;
return (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<div>
<div className = "card">
<div className = "row no-gutters">
<aside className = "col-md-6">
<h2 className = "title">{product.name}</h2>
<div className = "mb-3">
<var className = "price h4">Price: $ {product.price}</var>
</div>
<p>
{product.description}
</p>
</main>
</div>
</div>
</div>
)}
</>
);
};
export default ProductPage;
Можем ли мы увидеть соответствующий код getSingleProduct в вопросе?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Похоже, вы не форматируете JSX в возвращаемой части. Попробуйте эту простейшую форму после импорта:
const ProductPage = () => {
const dispatch = useDispatch()
const { product, loading } = useSelector((state) => state.productDetail)
let { id } = useParams()
useEffect(() => {
dispatch(getSingleProduct(id))
}, [dispatch, id])
return (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<>
{' '}
<h2 className = "title">{product.name}</h2>
</>
)}
</>
)
}
export default ProductPage
Если это не работает, это означает, что есть проблема в getSingleProduct или в связанном с ним редюсере. Если выдает вам название продукта, это означает, что ваш код отформатирован неправильно. Попробуйте исправить это тогда.
Изменить. Кроме того, я заметил, что обработка невозможна, если сервер не предоставляет данные или если загрузка и продукт не определены, тогда ваш компонент также выйдет из строя. Вы можете справиться с этим следующим образом:
<>
{loading ? (
<h1>Loading...</h1>
) : product ? (
<>
{' '}
<h2 className = "title">{product.name}</h2>
</>
) : (
<> No data from Server</>
)}
</>
Сложно сказать, возможно после добавления логина ваш
getSingleProductне работает. Попробуйте отладить эту функцию