为什么 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,
        })
    )
}