Javascript 使用React和Redux渲染对象的子对象时出现问题

使用React和Redux渲染对象的子对象时出现问题

这是代码

当我得到一个特定ID的数据时，除了一个我命名为

talla_L

的对象之外，其他一切都能正常工作，当我想渲染像

product.talla_L.cantidad

这是行动文件

const detailsProduct=（productId）=>async（dispatch）=>{
试一试{
分派（{type:PRODUCT\u DETAILS\u REQUEST，payload:productId}）；
const{data}=wait axios.get（`/api/costs/get/${productId}`）；
调度（{
类型：产品\u详情\u成功，
有效载荷：data.result
});
}捕获（错误）{
调度（{
类型：产品\u详细信息\u失败，
有效负载：error.message
});
}
};

这是还原器文件

constClotherDetailsReducer=（状态={product:{}}，action）=>{
开关（动作类型）{
案例产品详情请求：
返回{loading:true}；
案例产品\u详情\u成功：
返回{loading:false，product:action.payload}；
案例产品详细信息失败：
返回{loading:false，error:action.payload}；
违约：
返回状态；
}
};

• 下面是我尝试渲染

  product.talla_L.cantidad

  
  
• 当我不尝试渲染时

我不明白为什么它不让我呈现product.talla_L.cantidad对象，而我的API的响应似乎没有什么问题

PD：我已经尝试过通过向组件发送道具来分解对象道具，但得到了相同的结果

PD2：我已经从我的redux文件中添加了信息，以便您更好地理解我的代码的组成，并帮助我在尝试渲染该对象时发现错误

---

您的

产品

值似乎在第一次渲染中未定义。返回组件标记之前，请检查

产品

是否具有所需的值。如果没有，则通过返回

null

停止渲染

当

产品

具有正确的值时，它将正确渲染

const ProductDetails = (props) => {
  const productDetails = useSelector((state) => state.productDetails);
  const { product, loading, error } = productDetails;
  const dispatch = useDispatch();

  useEffect(() => {
    let id = props.match.params.id;
    dispatch(detailsProduct(id));
    return () => {
      //
    };
  }, []);

  console.log(product);

  // Check the value before rendering.
  if (!product) {
    return null;
  }

  return (
    <div className="textWhite">
      <div className="link-style123">
        <Link to="/ropa">Volver</Link>
      </div>
      {loading ? (
        <div>loading...</div>
      ) : error ? (
        <div>{error}</div>
      ) : (
        <div className="details">
          <div>
            <p>img-url: {product.imagen}</p>
          </div>
          <div>
            <ul>
              <li>
                <h4>{product.tipo}</h4>
              </li>
              <li>
                <h4>{product.color}</h4>
              </li>
              <li>
                <h4>{product.precio}</h4>
              </li>
            </ul>
            <ul>

              <li>
                <h4>{product.talla_L.cantidad}</h4>
              </li>

            </ul>
          </div>
        </div>
      )}
    </div>
  );
};
export default ProductDetails;

constproductdetails=（道具）=>{
const productDetails=useSelector（（state）=>state.productDetails）；
const{product，loading，error}=productDetails；
const dispatch=usedpatch（）；
useffect（（）=>{
设id=props.match.params.id；
调度（详细产品（id））；
return（）=>{
//
};
}, []);
控制台日志（产品）；
//在渲染之前检查该值。
如果（！产品）{
返回null；
}
返回(
玩美女人
{加载(
加载。。。
)：错误(
{错误}
) : (
img url:{product.imagen}



{product.tipo}


{product.color}


{product.precio}




{product.talla_L.cantidad}


)}
);
};
导出默认产品详细信息；

您可以看到第二个产品日志未定义。在那一步中，您得到了NullpointerException，谢谢，这修复了my console.log的未定义问题，但它无法解决我的

product.talla_L.cantidad

渲染错误。

{
  color: "Amarllo"
  imagen: "noImg"
  precio: 7000
  talla_L: {
    cantidad: 6
    talla: "L"
 },
  talla_M: {
    cantidad: 2
    talla: "M"
  },
  talla_S: {
    cantidad: 6
    talla: "S"
  }
}

const ProductDetails = (props) => {
  const productDetails = useSelector((state) => state.productDetails);
  const { product, loading, error } = productDetails;
  const dispatch = useDispatch();

  useEffect(() => {
    let id = props.match.params.id;
    dispatch(detailsProduct(id));
    return () => {
      //
    };
  }, []);

  console.log(product);

  // Check the value before rendering.
  if (!product) {
    return null;
  }

  return (
    <div className="textWhite">
      <div className="link-style123">
        <Link to="/ropa">Volver</Link>
      </div>
      {loading ? (
        <div>loading...</div>
      ) : error ? (
        <div>{error}</div>
      ) : (
        <div className="details">
          <div>
            <p>img-url: {product.imagen}</p>
          </div>
          <div>
            <ul>
              <li>
                <h4>{product.tipo}</h4>
              </li>
              <li>
                <h4>{product.color}</h4>
              </li>
              <li>
                <h4>{product.precio}</h4>
              </li>
            </ul>
            <ul>

              <li>
                <h4>{product.talla_L.cantidad}</h4>
              </li>

            </ul>
          </div>
        </div>
      )}
    </div>
  );
};
export default ProductDetails;