对象作为React子对象无效(找到:具有键｛｝的对象).在本地机器(chrome浏览器)中工作，但不在生产和其他浏览器中

Question

错误：-对象作为React子对象无效(已找到：具有键｛｝的对象(。如果要渲染子对象的集合，请改用数组

它在我的本地机器(chrome浏览器(上工作，但在生产中不能在其他浏览器中工作。这里我很困惑

下面是我的推车减速器状态(使用Redux(

const cart = {
cartItems: [],
shippingAddress:{},
paymentMethod:{}
}

const PlaceorderScreen = ({ history }) => {
const dispatch = useDispatch()
const userLogin = useSelector((state) => state.userLogin)
const { userInfo } = userLogin
const cart = useSelector((state) => state.cart)
const { cartItems, shippingAddress, paymentMethod } = cart
console.log(cartItems)
const placeOrder = useSelector((state) => state.placeOrder)
const { success, order } = placeOrder

当我删除计算部分时，它在本地和生产中都可以正常工作

我在这里进行计算，然后添加到我的购物车对象中

// calculations
const addDecimals = (num) => {
return (Math.round(num * 100) / 100).toFixed(2)
}
let cost = 0
cartItems.map((product) => {
cost = product.price * product.qty + cost
})
cart.itemsPrice = addDecimals(Number(cost))
cart.taxPrice = addDecimals(Number((0.15 * cart.itemsPrice).toFixed(2)))
cart.shippingPrice = addDecimals(cart.itemsPrice > 100 ? 0 : 100)
cart.totalPrice = (
Number(cart.itemsPrice) +
Number(cart.shippingPrice) +
Number(cart.taxPrice)
).toFixed(2)

在购物车中插入计算后。我的购物车对象看起来像这样

cart: {
cartItems: [
{
...
}
],
shippingAddress: {
address: 'ddd',
city: 'ddd',
postalCode: '33',
country: 'dd'
},
paymentMethod: 'Paypal',
itemsPrice: '59.99',
taxPrice: '9.00',
shippingPrice: '100.00',
totalPrice: '168.99'
},

计算完购物车对象后，我将在此处访问它们。此块中出现问题。当我删除Cart_Summary时，它工作正常

<div className="Cart_Summary">
<p className="Cart_Summar">Cart Summary</p>
<div className="row">
<div className="col1">
<p>Item price</p>
<p>Shipping price</p>
<p>Tax price</p>
<p>Total price</p>
<br></br>
<p>PaymentMethod</p>
</div>
<div className="col2">
<p>${cart.itemsPrice}</p>
<p>${cart.shippingPrice}</p>
<p>${cart.taxPrice}</p>
<p>${cart.totalPrice}</p>
<br></br>
<p>{paymentMethod}</p>
</div>
</div>
<button onClick={placeOrderHandler}>Place Order</button>
</div>

Answer 1

似乎是因为paymentMethod:｛｝，所以在用字符串值初始化之前，它被当作对象处理。