TypeScript React:使用字符串数组作为索引，并从状态获取值

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [state, setState] = useState({ 
    value1: 'Hello',
    value2: 'World'
  });

  // 其他组件逻辑...

  return <div>{state.value1} {state.value2}</div>;
};

export default MyComponent;

const MyComponent: React.FC = () => {
  const [state, setState] = useState({ 
    value1: 'Hello',
    value2: 'World'
  });

  const [index, setIndex] = useState(1);

  // 通过索引获取状态值
  const value = state[`value${index}`];

  // 通过索引更新状态值
  const updateValue = (newValue: string) => {
    setState(prevState => ({
      ...prevState,
      [`value${index}`]: newValue
    }));
  };

  // 其他组件逻辑...

  return (
    <div>
      <div>{value}</div>
      <button onClick={() => setIndex(index + 1)}>Next</button>
      <button onClick={() => updateValue('New Value')}>Update</button>
    </div>
  );
};