开发者问题收集

未捕获的类型错误：刷新后无法读取未定义的属性（读取‘0’）

2022-10-21
571
reactjs redux react-hooks react-redux react-router

我这里有一个奇怪的问题，所以我正在使用 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 状态中获得了必要的数据，但是当我刷新页面时，它给了我这个错误： Uncaught TypeError：无法读取未定义的属性（读取“0”） 在这行代码中： 

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

我完全迷路了！

2个回答

当您重新加载页面时，所有 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;
Drew Reese
2022-10-21

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

Wraithy
2022-10-21