如何在react js中显示与单选按钮点击时api不同的值？

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

function MyComponent() {
  const [apiValue, setApiValue] = useState(null);
  const [displayValue, setDisplayValue] = useState('');

  // ...
}

useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch('your-api-endpoint');
      const data = await response.json();
      setApiValue(data.value); // 假设API返回的数据中有一个名为"value"的字段
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }

  fetchData();
}, []);

function handleRadioClick(event) {
  const selectedValue = event.target.value;
  // 这里可以根据需要转换或处理selectedValue
  const transformedValue = transformValue(selectedValue, apiValue);
  setDisplayValue(transformedValue);
}

function transformValue(selected, apiVal) {
  // 根据需要实现转换逻辑
  // 例如，如果API返回的是数字，而你想显示对应的文本
  const valueMap = {
    '1': 'One',
    '2': 'Two',
    // ...
  };
  return valueMap[selected] || apiVal;
}

return (
  <div>
    <div>Selected Value: {displayValue}</div>
    <label>
      <input type="radio" value="1" onClick={handleRadioClick} /> Option 1
    </label>
    <label>
      <input type="radio" value="2" onClick={handleRadioClick} /> Option 2
    </label>
    {/* 更多单选按钮 */}
  </div>
);