React中单选框默认选中时如何设置状态？未修改选项直接点击添加时如何存储变体值？

我明白你的困扰了——你设置了第一个单选框默认选中，但因为没有把这个默认选项的值提前存入状态，用户直接点「add item」时就会传空对象过去。而且确实不能在.map()里直接设置状态，会触发无限重渲染。

这里有个简单的解决方案：利用useEffect在组件挂载或者props.selectedCustomItem.variants变化时，自动把第一个variant的第一个选项初始化到你的状态里。

修改后的完整代码示例 #

import { useState, useEffect } from 'react';

// 你的组件代码
const YourComponent = (props) => {
  // 把variant的初始值改成null（因为它存的是单个对象，不是数组）
  const [variantOption, setVariantOption] = useState({}); 
  const [variant, setVariant] = useState(null); 

  // 初始化默认值
  useEffect(() => {
    // 先确保variants数组存在且有内容
    if (props.selectedCustomItem?.variants?.length > 0) {
      const firstVariant = props.selectedCustomItem.variants[0];
      // 再确保这个variant有options
      if (firstVariant?.options?.length > 0) {
        setVariant(firstVariant);
        setVariantOption(firstVariant.options[0]);
      }
    }
  }, [props.selectedCustomItem.variants]); // 依赖项：当variants变化时重新执行

  return (
    <div>
      {props.selectedCustomItem.variants.map((currentVariant, variantIndex) => ( 
        <div key={variantIndex}> {/* 别忘了加key */}
          {currentVariant.options.map((option, optionIndex) => { 
            // 给单选框的name加上variant标识，避免不同variant的单选互相干扰
            return (
              <input 
                key={optionIndex} // 单选框也要加key
                type="radio" 
                name={`variant-select-${variantIndex}`} 
                id={`variant-select-${variantIndex}-${optionIndex}`} 
                defaultChecked={optionIndex === 0} 
                value={option.price} 
                onChange={(e) => { 
                  setVariantOption(option); 
                  setVariant(currentVariant); 
                }} 
              />
            )
          })} 
          <button onClick={() => { 
            // 这里可以加个判断，确保variant和variantOption都有值再调用
            if (variant && variantOption) {
              props.addFoodItems(variant, variantOption); 
            }
          }} >add item</button>
        </div>
      ))}
    </div>
  )
}

关键说明 #

1. useEffect初始化：当组件第一次渲染，或者props.selectedCustomItem.variants数据更新时，自动把第一个variant的第一个选项存入状态，这样用户不修改也能拿到默认值。
2. 修复状态初始值：你的variant状态存的是单个对象，但初始值设成了数组[]，改成null更符合实际类型。
3. 避免单选框冲突：原来所有单选框的name都是variant-select，会导致不同variant下的单选互相影响，现在给name加上variant的索引，让每个variant的单选自成一组。
4. 添加key属性：React列表渲染必须加key，避免渲染异常。
5. 安全判断：点击按钮时先判断状态是否有值，防止传空数据。

这样就能完美解决用户直接点击按钮时没有默认值的问题啦～

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