考虑为每个ServerType创建一个子组件来保存其自己的状态。
此外，您选择的是位置，而不是价格。因此，价格可以从selectedLocation导出。

export default function App() {
  const data = {
    serverTypes: [
      {
        id: 1,
        list: [
          { location: "usa", price: 1000 },
          { location: "germany", price: 2000 }
        ]
      },
      {
        id: 2,
        list: [
          { location: "usa", price: 2500 },
          { location: "germany", price: 3000 }
        ]
      }
    ]
  };

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>location</th>
            <th>price</th>
          </tr>
        </thead>
        <thead>
          {data.serverTypes.map((serverType, index) => (
            <ServerType key={index} serverType={serverType} />
          ))}
        </thead>
      </table>
    </div>
  );
}

const ServerType = ({ serverType }) => {
  const [selectedLocation, setSelectedLocation] = useState(0);
  const { id, list } = serverType;
  return (
    <tr>
      <td>{id}</td>
      <td>
        <select onChange={({ target }) => setSelectedLocation(target.value)}>
          {list.map(({ location }, index) => {
            return <option value={index}>{location}</option>;
          })}
        </select>
      </td>
      <td>{list[selectedLocation].price}</td>
    </tr>
  );
};