未捕获的类型错误：刷新后无法读取未定义的属性(读取"0")

Question

我有一个奇怪的问题，所以我正在使用redux，这是我从reducer状态选择的产品的组件代码。

import './productInfo.css';
import { useParams } from 'react-router-dom';
import { getProduct } from '../../actions/productActions';
import { connect } from 'react-redux';
import { useEffect, useState } from 'react';

const ProductInfo = (props) => {

const [usedProduct, setUsedProduct] = useState(props)
const {id} = useParams();

useEffect(() => {
props.getProduct(id);
}, [usedProduct])
let newUsedProduct = usedProduct;
console.log(usedProduct.products[0].name)



return ( 
<div>


</div>
);
}
const mapStateToProps = (state) => {
return{
products : state.myProduct.product
}
}
export default connect( mapStateToProps, { getProduct })(ProductInfo);

因此，当我第一次启动该组件时，它可以工作，并且我从reducer状态中获得了必要的数据，但当我刷新页面时，它会出现以下错误：未捕获的TypeError:无法读取未定义的属性(正在读取"0"(在这行代码中：

console.log(usedProduct.products[0].name)

我完全迷路了！

Answer 1

当您重新加载页面时，所有React状态，包括Redux状态，都会丢失，因为它们只存在于内存中。该组件应处理可能丢失的数据。

示例：

const ProductInfo = ({ getProduct, products }) => {
const { id } = useParams();

useEffect(() => {
getProduct(id);
}, [id, getProduct]);
useEffect(() => {
console.log(products?.[0]?.name); // <-- log in effect
}, [products]);
return ( 
<div>
...
</div>
);
};
const mapStateToProps = (state) => ({
products: state.myProduct.product || [], // <-- provide fallback
});
export default connect(mapStateToProps, { getProduct })(ProductInfo);

我还建议更新代码以使用react-redux挂钩。

示例：

import { useDispatch, useSelector } from 'react-redux';
const ProductInfo = () => {
const dispatch = useDispatch();
const products = useSelector(state => state.myProduct.product || []);
const { id } = useParams();

useEffect(() => {
dispatch(getProduct(id));
}, [id, getProduct]);
useEffect(() => {
console.log(products?.[0]?.name); // <-- log in effect
}, [products]);
return ( 
<div>
...
</div>
);
};
export default ProductInfo;

Answer 2

Redux存储(在默认设置中(将不会通过刷新而持久化，您需要使用一些持久化方法(将其存储在本地存储或类似的东西中(，或者您需要在读取存储之前重新填充存储。