React映射单选按钮默认选中及初始值渲染问题求助

问题原因拆解 #

1. 初始{choice}不显示：

   • 初始choice设为空字符串，渲染时的判断choice === 0 ? "" : choice在请求完成前会显示空；就算请求完成后设置了值，若calories不是0才会显示，但初始加载阶段没做兜底处理。
   • 异步请求完成前size是空数组，choice的初始赋值要等请求返回后才执行，导致首次渲染无数据。

2. 单选按钮需两次点击才选中：

   • defaultChecked只在组件第一次渲染时生效，后续状态变化不会同步更新它，导致UI和实际状态脱节。
   • 单选按钮没加name属性，不属于同一组，无法互斥选择，点击逻辑混乱。
   • 点击事件只更新了choice，没跟踪单选按钮的选中状态，造成UI反馈延迟。

修复方案 #

1. 调整状态与请求逻辑 #

新增状态跟踪选中的单选按钮索引，确保初始选中状态和数据同步：

const [productData, setProductData] = useState(null); // 初始设为null，更贴合数据结构
const [size, setSize] = useState([]);
const [choice, setChoice] = useState("");
const [selectedIndex, setSelectedIndex] = useState(0); // 跟踪选中项的索引

useEffect(() => {
  const checkId = parseInt(window.location.href.slice(-1));
  axios.get(`http://localhost:5000/products?id=${checkId}`)
    .then((response) => {
      const product = response.data[0];
      setProductData(product);
      setSize(product.size);
      const initialCalories = product.size[0].calories;
      setChoice(initialCalories);
      setSelectedIndex(0); // 初始选中第一个选项
    });
}, []);

2. 重构单选按钮组件 #

替换defaultChecked为checked，添加name属性实现互斥，同步更新选中状态：

const GetSize = () => {
  return size.map((val, i) => {
    return (
      <div key={i}> {/* 必须加key，避免React列表渲染警告 */}
        <input
          onClick={() => {
            setChoice(val.calories);
            setSelectedIndex(i); // 点击时同步选中索引
          }}
          checked={selectedIndex === i} // 用状态控制选中状态
          type="radio"
          name="size-option" // 同一组单选按钮必须共享name
          id={`size-${i}`} // 配合label使用，提升交互体验
        />
        <label htmlFor={`size-${i}`}>
          <p>{val.option}</p>
          <p>{val.cup}</p>
        </label>
      </div>
    );
  });
};

3. 优化渲染逻辑 #

处理加载状态，避免空内容显示：

<div>
  {/* 加载阶段显示提示，请求完成后显示calories */}
  {!productData ? (
    <h1>加载中...</h1>
  ) : (
    <h1>{choice}</h1>
  )}
  <div>
    <h1>Size options</h1>
  </div>
  <div>
    <form>
      <GetSize />
    </form>
  </div>
</div>

核心修复点 #

• 用checked替代defaultChecked，通过selectedIndex状态控制选中状态，保证UI和数据同步。
• 给单选按钮加相同name，实现同一组互斥选择。
• 新增加载状态处理，避免初始渲染空内容。
• 列表项添加key，符合React渲染规范。

内容的提问来源于stack exchange，提问作者Dreynaldis