如何在循环中推入多个属性的数组和setState

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }

  componentDidMount() {
    const data = [
      { id: 1, name: 'Item 1', value: 10 },
      { id: 2, name: 'Item 2', value: 20 },
      // ...更多数据
    ];

    const updatedItems = [];
    for (let item of data) {
      updatedItems.push({
        ...item,
        // 可以在这里添加或修改属性
        processedValue: item.value * 2
      });
    }

    this.setState({ items: updatedItems });
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => (
          <div key={item.id}>
            {item.name} - {item.processedValue}
          </div>
        ))}
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const data = [
      { id: 1, name: 'Item 1', value: 10 },
      { id: 2, name: 'Item 2', value: 20 },
      // ...更多数据
    ];

    const updatedItems = data.map(item => ({
      ...item,
      processedValue: item.value * 2
    }));

    setItems(updatedItems);
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name} - {item.processedValue}
        </div>
      ))}
    </div>
  );
}

this.setState({ items: updatedItems }, () => {
  // 这里的代码会在状态更新后执行
});

this.setState(prevState => ({
  items: [...prevState.items, newItem]
}));