為什么 object 屬性未定義

Question

因此，我正在嘗試使用 reduxtoolkit 並希望創建 addtocart function 並且在嘗試設置有效負載時我無法訪問我的數據的 object 屬性。

const {data:foods,isPending,error} = useFetch('http://localhost:8000/foods')
const [data, setData] = useState(foods)
useEffect(()=>{
    setData(foods)
},[foods])    console.log(data)
console.log(data.name)
const dispatch = useDispatch();
const addToCart = () => {
    dispatch(
        cartActions.addToCart({
            name :data.name,
            id:data.id,
            price:data.price,
        })
    )
} 

錯誤：當我嘗試記錄 object 屬性時，它返回未定義，但是當我記錄它顯示的數據時

Answer 1

我認為你收到一個數組的原因，你需要添加一個索引來獲取訪問權限：

 dispatch(
        cartActions.addToCart({
            name :data[1].name,
            id: data[1].id,
            price: data.[1]price,
        })
    )

Answer 2

您可以清楚地看到，您從 API 調用中收到的是一個array ，它沒有name屬性。 但是，此數組中的項目具有name屬性（ data[0].name ）。 您需要做的是將要添加到購物車的項目的index傳遞到addToCart function 並在此基礎上訪問正確的data[index]項目變量

const addToCart = (itemIndex) => {
    dispatch(
        cartActions.addToCart({
            name :data[itemIndex].name,
            id:data[itemIndex].id,
            price:data[itemIndex].price,
        })
    )
}