数据延迟导致页面崩溃错误

Question

我面临一个问题，我想了很多，但找不到任何解决方案。请帮忙注意：我已经删除了一些html代码，因为我知道问题不存在。所以首先让我们解释一下问题是什么。我正在解构加载和产品，当我第一次创建时，最初需要时间来解决它，但加载错误变为真，加载组件呈现为一旦加载变为false，我就可以访问变量product，然后从中呈现数据。但在一段时间之前，我只是添加了登录的功能，我甚至还没有接触到这个页面。现在发生的事情是什么，直到product和加载的值被解决，两个变量的值都是未定义的。我使用console.log((使用找到它

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.log("The data of the product is",product)
console.log("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;

Answer 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</>
)}
</>