使用useReducer向状态数组中的对象添加属性

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_PROPERTY':
      return state.map(obj => ({
        ...obj,
        newProperty: action.value
      }));
    default:
      return state;
  }
}

import React, { useReducer } from 'react';

function MyComponent() {
  const initialState = [
    { id: 1, name: 'Object 1' },
    { id: 2, name: 'Object 2' },
    { id: 3, name: 'Object 3' }
  ];

  const [state, dispatch] = useReducer(reducer, initialState);

  // 添加属性的函数
  const addProperty = (value) => {
    dispatch({ type: 'ADD_PROPERTY', value });
  };

  return (
    <div>
      {state.map(obj => (
        <div key={obj.id}>
          <span>{obj.name}</span>
          <span>{obj.newProperty}</span>
        </div>
      ))}
      <button onClick={() => addProperty('New Value')}>Add Property</button>
    </div>
  );
}