javascript - React useReducer 查找和更改状态中的单个对象

Question

我有一个状态对象，其中包含一个名为 rows 的数组。该数组包含一个对象列表:

{_id: "5e88ad4c5f6f7388d50b9480",
stampa: "Confezione",
S: 0,
M: 0,
L: 0,
XL: 0,
coloured: "",
modello: "",
SKU: ""}

现在，在一个表单中，我发送了一个有效负载包含完全相同对象的操作，唯一的区别是键 S、M、L，可以改变的XL。

然后，在我的 reducer 中，我想通过与 _id 匹配，在我的原始状态中找到相同的对象，然后用负载附带的对象更新它。这是我的尝试，但是我收到以下错误:

TypeError: state.rows.map 不是函数

case "UPDATE_ROW":
      return state.rows.map((row) =>
        row._id === action.payload._id
          ? {
              ...row,
              _id: action.payload,
            }
          : row
      );

我怎样才能更好地解决这个问题？

编辑:这是我的 reducer :

export default (state, action) => {
  switch (action.type) {
    case "UPDATE_STATE":
      return {
        ...state,
        rows: action.payload,
      };
    case "SET_ERROR":
      return {
        ...state,
        error: action.payload,
      };
    case "UPDATE_ROW":
      console.log("updating", action.payload);
      return state.rows.map((row) =>
        row._id === action.payload._id
          ? {
              ...row,
              _id: action.payload,
            }
          : row
      );

    default:
      return state;
  }
};

这是我的状态:

import React, { createContext, useReducer } from "react";
import AppReducer from "./AppReducer";

// Initial State
const initialState = {
  rows: [],
};

export const GlobalContext = createContext(initialState);

// Provider component
export const GlobalProvider = ({ children }) => {
  const [state, dispatch] = useReducer(AppReducer, initialState);
  console.log(state);

  return (
    <GlobalContext.Provider value={[state, dispatch]}>
      {children}
    </GlobalContext.Provider>
  );
};

Answer 1

您遇到的主要问题是您应该将 state.rows 默认为一个数组，以便停止类型错误。除此之外，据我所见，您的逻辑似乎没问题。

编辑:

好的，看起来您的问题是您在运行“UPDATE_ROW”案例时没有返回完整状态。如果你使用它，我相信这个问题应该得到解决。

我还修复了 reducer 案例中的逻辑。看起来您在 _id 属性中添加了整个有效负载对象，同时保持该行的其余部分相同。而不是使用有效负载属性更新行。

export default (state, action) => {
  switch (action.type) {
    case "UPDATE_STATE":
      return {
        ...state,
        rows: action.payload,
      };
    case "SET_ERROR":
      return {
        ...state,
        error: action.payload,
      };
    case "UPDATE_ROW":
      console.log("updating", action.payload);
      return {...state, rows:state.rows.map((row) =>
        row._id === action.payload._id
          ? {
              ...action.payload
            }
          : row
      )};

    default:
      return state;
  }
};