在React中使用useContext和useReducer创建新的键值对

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

const MyContext = React.createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return { ...state, [action.key]: action.value };
    case 'REMOVE':
      const newState = { ...state };
      delete newState[action.key];
      return newState;
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, {});
  const { key1, key2 } = useContext(MyContext);

  const handleAdd = () => {
    dispatch({ type: 'ADD', key: 'newKey', value: 'newValue' });
  };

  const handleRemove = () => {
    dispatch({ type: 'REMOVE', key: 'newKey' });
  };

  return (
    <div>
      <button onClick={handleAdd}>Add Key-Value Pair</button>
      <button onClick={handleRemove}>Remove Key-Value Pair</button>
      <p>Key 1: {key1}</p>
      <p>Key 2: {key2}</p>
    </div>
  );
};

const App = () => {
  return (
    <MyContext.Provider value={{ key1: state.key1, key2: state.key2 }}>
      <MyComponent />
    </MyContext.Provider>
  );
};