使用React上下文更新reducer中的子数组

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

// 创建上下文对象
const SubArrayContext = createContext();

// 定义reducer函数
function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_SUB_ARRAY':
      // 更新子数组
      return {
        ...state,
        subArray: action.payload,
      };
    default:
      return state;
  }
}

// 定义初始状态
const initialState = {
  subArray: [],
};

// 创建组件，提供上下文和reducer
function SubArrayProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

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

// 自定义hook，用于获取上下文中的状态和更新函数
function useSubArray() {
  const context = useContext(SubArrayContext);
  if (!context) {
    throw new Error('useSubArray must be used within a SubArrayProvider');
  }
  return context;
}

function ChildComponent() {
  const { state, dispatch } = useSubArray();

  const updateSubArray = () => {
    // 更新子数组
    const newSubArray = [...state.subArray, 'new item'];
    dispatch({ type: 'UPDATE_SUB_ARRAY', payload: newSubArray });
  };

  return (
    <div>
      <button onClick={updateSubArray}>更新子数组</button>
      <ul>
        {state.subArray.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function ParentComponent() {
  return (
    <SubArrayProvider>
      <ChildComponent />
    </SubArrayProvider>
  );
}