React中如何使用动态元素数量的数组状态实现受控输入

触发警告的核心原因 #

该警告本质是input的value属性从undefined变为有定义的字符串，导致组件在受控/非受控模式之间切换。当你调整选项数量后，新增下标i对应的options[i]初始为undefined，就会触发这个问题。

修复方案 #

第一步：调整选项数量时同步初始化options数组默认值 #

保证options数组的长度和当前选项数完全一致，新增的项默认赋值为空字符串''而非留空。示例逻辑如下（假设用户输入的选项数存在optionCount状态中）：

// 监听选项数变更，同步调整options数组
useEffect(() => {
  setOptions(prev => {
    const newOptions = [...prev];
    // 长度不足时补空字符串作为默认值
    while (newOptions.length < optionCount) {
      newOptions.push('');
    }
    // 长度超出时截断多余项
    return newOptions.slice(0, optionCount);
  })
}, [optionCount])

第二步：给input的value加兜底值做双重保障 #

就算出现数组长度不匹配的极端情况，也保证value永远不会是undefined，修改渲染逻辑中的value属性：
把value={options[i]}改为value={options[i] ?? ''}，修改后的完整代码如下：

<Form.Group key={i} className="mb-3" controlId="exampleForm.ControlInput1">
    <Form.Control
        value={options[i] ?? ''}
        onChange={(e) => {
            setOptions((prev) => {
                let previous = [...prev]
                previous[i] = e.target.value
                return previous
            })
        }}
        type="text"
        placeholder={`Option ${i + 1}`} 
        className="options"
        />
</Form.Group>

注意事项 #

• 不要用undefined作为受控输入的初始值，空字符串''才是受控空输入的合法默认值
• 如果后续有调整选项顺序、删除中间选项的需求，建议用唯一ID代替数组下标作为输入框的key属性，避免渲染异常

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