reactjs - 在 reducer 中使用对象的值

Question

我有一个对象存储在我的减速器中：

editProductBasket: [{
    name: "roger",
    price: "12",
}],

我正在尝试使用以下代码在我的不同部分中使用这些值：

function PhoneMockupEdit() {
  const [
    {
      editProductBasket: { name, price, description, quantity },
    },
    dispatch,
  ] = useStateValue();

return (
    <div className="phone__mockup">
      <h1>{name}<h2>
    </div>
  );
}

但是，没有显示来自减速器的数据。任何想法为什么？

这是我的StateProvider代码：

import React, { createContext, useContext, useReducer } from "react";

// create the data layer
export const StateContext = createContext();

// Build a provider so we can wrap entire app inside of provider so we access data layer
export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// This is where we use it in a component
export const useStateValue = () => useContext(StateContext);

这是我的减速器代码：

export const initialState = {
  editProductBasket: [],
 
};

function reducer(state, action) {
  console.log(action);
  switch (action.type) {

    case "SET_EDIT_PRODUCT":
      return {
        ...state,
        editProductBasket: [...state.editProductBasket, action.item],
      };

    default:
      return state;
  }
}
export default reducer;

标签： reactjs

Answer 1

您错误地破坏了您的状态。

editProductBasket 属性是一个数组而不是一个对象，因此您需要从数组的第一个元素中解构，而不是尝试从整个数组中解构属性。

      const [
        {
          editProductBasket: [{ name, price, description, quantity }],
        },
        dispatch,
      ] = useStateValue();

const { createContext, useContext, useReducer } = React;

// create the data layer
const StateContext = createContext();

// Build a provider so we can wrap entire app inside of provider so we access data layer
const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

// This is where we use it in a component
const useStateValue = () => useContext(StateContext);

const initialState = {
  editProductBasket: [
    {
      name: 'roger',
      price: '12',
    },
  ],
};

function reducer(state, action) {
  console.log(action);
  switch (action.type) {
    case 'SET_EDIT_PRODUCT':
      return {
        ...state,
        editProductBasket: [...state.editProductBasket, action.item],
      };

    default:
      return state;
  }
}

function PhoneMockupEdit() {
  const [
    {
      editProductBasket: [{ name, price, description, quantity }],
    },
    dispatch,
  ] = useStateValue();
  return (
    <div className="phone__mockup">
      <h1>{name}</h1>
    </div>
  );
}

ReactDOM.render(
  <StateProvider reducer={reducer} initialState={initialState}>
    <PhoneMockupEdit />
  </StateProvider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"/>