由于Object在Reactjs中不可迭代，因此无法进行析构函数

Question

我想销毁导航栏span标签中的购物篮数量，但我遇到了eror：">TypeError:对象不可迭代(无法读取属性Symbol(Symbol.iterator(("。在这一行：

| } from "./StateProvider";
5 | 
6 | function Navbar() {
>  7 |     const [{
8 |         basket
9 |     }] = useStateValue();

我不知道我的代码出了什么问题，请帮帮我！非常感谢！10|返回(<

App.js:

import React from "react";
import Product from "./Product.js";
import Navbar from "./Navbar";
function App() {
return (
<div>
<Navbar />
<div className="home__row">
<Product
id="124123"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={11.96}
rating={5}
image="https://vinmec-prod.s3.amazonaws.com/images/20191129_135935_644048_trung.max-800x800.jpg"
/>
<Product
id="233123"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={11.96}
rating={3}
image="https://coquynhketoan.edu.vn/wp-content/uploads/2018/04/book-4.jpg"
/>
</div>{" "}
<div className="home__row">
<Product
id="953123"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={11.96}
rating={5}
image="https://kingshop.vn/data/products/500/am-dun-nuoc-sieu-toc-nagakawa-nag0307-1.jpg"
/>
<Product
id="111123"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={12.96}
rating={4}
image="https://cuahangminhlong.com/wp-content/uploads/2019/03/B%C3%ACnh-hoa-27-cm-Ki%C3%AAu-Sa-scaled.jpg"
/>
<Product
id="523153"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={13.96}
rating={3}
image="https://upload.wikimedia.org/wikipedia/commons/3/3a/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B1%E3%83%BC%E3%82%AD.png"
/>
</div>{" "}
<div className="home__row">
<Product
id="167723"
title="once i see you i will probably kill you immediately and then eat you that how crazy i think you are"
price={14.96}
rating={4}
image="https://vnn-imgs-f.vgcloud.vn/2021/07/21/10/cam-sanh-1.jpg"
/>
</div>{" "}
</div>
);
}
export default App;

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { stateProvider } from "./StateProvider";
import reducer, { initialState } from "./reducer";
ReactDOM.render(
<React.StrictMode>
<stateProvider initialState={initialState} reducer={reducer}>
{" "}
<App />{" "}
</stateProvider>{" "}
</React.StrictMode>,
document.getElementById("root")
);

Navbar.js:

import React from "react";
import { useStateValue } from "./StateProvider";
function Navbar() {
const [{ basket }] = useStateValue();
return (
<div className="cart">
<i class="fas fa-shopping-basket"> </i> <span>{basket.length} </span>{" "}
</div>
);
}
export default Navbar;

reducer.js:

export const initialState = {
basket: ['ball', 'water'],
}
function reducer(state, action) {
switch (action.type) {
case 'ADD_TO_BASKET':
//Logic for adding item to basket
break;
case 'REMOVE_FROM_BASKET':
//Logic for remove item from basket
break;
default:
return state
}

}
export default reducer;

StateProvider.js:

//setup data layer
//we need this to track the basket
import React, { createContext, useContext, useReducer } from "react";
//DATA LAYER
export const StateContext = createContext();
//BUILD PROVIDER
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{" "}
{children}{" "}
</StateContext.Provider>
);
//This is how we use it inside of a component
export const useStateValue = () => useContext(StateContext);

Answer 1

从对象中析取值的正确方法如下：

const { basket } = useStateValue();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment