reactjs - 无法解构，因为 Object 在 Reactjs 中不可迭代

问题描述

我想在导航栏跨度标签中解构篮子数量，但我遇到了错误：“ TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) ”。它在这一行：

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

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

应用程序.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")
);

导航栏.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;

减速器.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);

标签： reactjsobjectdestructure

reactjs - 无法解构，因为 Object 在 Reactjs 中不可迭代

问题描述

解决方案

推荐阅读