获取产品后设置默认状态在 ReactJS 中返回未定义答案

【问题标题】：Setting the default state after fetching the product returns undefined in ReactJS获取产品后设置默认状态在 ReactJS 中返回未定义
【发布时间】：2022-12-12 22:02:57
【问题描述】：

我正在尝试为颜色、大小等设置默认状态。当我发送 getProduct(id) 操作时，我得到了产品并且一切正常（我的产品有一个大小：size: ['s','m'...]）。我希望它默认是数组中的第一个元素，我这样做是这样的：

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

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

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


  const [sizeState, setSizeState] = useState(
    product?.size?.length > 0 && product?.size[0]
  );

console.log(product?.size?.length > 0 返回 false console.log(product?.size[0]) 返回未定义。

这是我的产品对象： Product object

【问题讨论】：

您的代码中的 console.log 在哪里？
在 const [sizeState, setSizeState] = useState( product?.size?.length > 0 && product?.size[0] );

标签： reactjs mern

【解决方案1】：

只需为产品状态添加 useEffect 观察器。然后使用数组的 unshift 方法

useEffect(()=>{

if(product){


setSize((prevState)=>[product?.size,...prevState])
}

},[product])

【讨论】：

【解决方案2】：

在我看来，您在获取产品后似乎没有解析 JSON 对象。确保在获取后解析它。

fetch(URL, OPTIONS).then(res => res.json());

【讨论】：