React动态输入字段中select标签状态未生效问题求助

状态已注册，但beds的目标值未生效，下拉选择后无法正确更新状态，以下是相关代码及排查修复方案：

主组件代码 #

const options = ["1", "2", "3"];
class Apps extends React.Component {  
  constructor(props) {    
    super(props)
    this.state = { 
       formValues: [{ name: "", email : "" , beds: options[0]}]
     };
    
  }  
  handleChange(i, e) {
    this.setState(prevState => {
      const formValues = [...prevState.formValues];
      formValues[i] = {
        ...formValues[i],
        [e.target.name]: e.target.value
      };
      return { formValues };
    });
  }
  render() {
    const {formValues} = this.state;
    return (
        <PropertyType options={options} values={formValues}  handleChange={this.handleChange.bind(this)} />
    );
  }
}

PropertyType组件代码 #

function PropertyType({values, add, remove, options, handleChange, handleSubmit}) {
    return (
        <form  onSubmit={handleSubmit}>
          {values.map((element, index) => (
            <div className="form-inline" key={index}>
              <label>Name</label>
              <input type="text" name="name" value={element.name || ""} onChange={e => handleChange(index, e)} />
              <label>Email</label>
              <input type="text" name="email" value={element.email || ""} onChange={e => handleChange(index, e)} />
              <select 
                  name="beds"
                  value={element.beds} 
                  onChange={e => handleChange(index, e)}>
                    {options.map((value) => (
                      <option value={value} key={value}>
                        {value}
                      </option>
                    ))}
               </select>
              {
                index ? 
                  <button type="button"  className="button remove" onClick={() => remove(index)}>Remove</button> 
                : null
              }
            </div>
          ))}
          <div className="button-section">
              <button className="button add" type="button" onClick={() => add()}>Add</button>
              <button className="button submit" type="submit">Submit</button>
          </div>
      </form> );
}

问题原因及修复说明 #

• 类型不匹配：初始state中beds被设为数组[options[0]]，但下拉选择框的value应为单个字符串（对应option的value值），类型不匹配导致组件无法正确识别选中状态，也无法完成更新。
• 缺少name属性：select标签未设置name="beds"，导致handleChange中e.target.name为undefined，无法将选中值赋值到对应state字段。
• 直接修改原state：原handleChange中直接修改this.state.formValues内容，违反React状态不可变原则，可能导致组件无法触发重新渲染。

修复步骤 #

1. 将初始state中beds的类型从数组改为单个字符串：beds: options[0]
2. 给select标签添加name="beds"属性，确保handleChange能正确识别要更新的字段
3. 修改handleChange方法，通过拷贝原state创建新的状态对象，避免直接修改原数据，保证组件能正确响应状态变化

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