ReactJS中获取产品后设置默认状态返回undefined问题求助

你的问题出在useState的初始值只在组件首次渲染时计算一次，而dispatch(getProduct(id))是异步请求，首次渲染时请求还没完成，product还是初始状态（比如undefined），所以product?.size根本拿不到值，自然会出现你看到的length>0返回false、size[0]是undefined的情况。

解决方法 #

给sizeState加一个监听product变化的useEffect，当产品数据加载完成后再设置默认选中的尺寸：

const { id } = useParams();
const dispatch = useDispatch();

const { product, isLoading } = useSelector(state => state.product);

useEffect(() => {
  dispatch(getProduct(id));
}, [dispatch, id]);

// 初始值先设为空或者默认占位符
const [sizeState, setSizeState] = useState('');

// 监听product变化，加载完成后设置默认尺寸
useEffect(() => {
  if (product?.size?.length > 0) {
    setSizeState(product.size[0]);
  }
}, [product]);

这样当异步请求完成，product更新后，这个useEffect就会触发，把size数组的第一个元素赋值给sizeState。

你也可以结合isLoading状态做判断，避免不必要的更新：

useEffect(() => {
  if (!isLoading && product?.size?.length > 0) {
    setSizeState(product.size[0]);
  }
}, [product, isLoading]);

内容的提问来源于stack exchange，提问作者Uros Dioda Rakic