react-bootstrap select选中选项后界面不更新显示问题求助

问题根源 #

两个核心问题直接导致UI不同步：

• 受控值匹配失败：state中category初始值为空字符串""，默认选项value设为null，其余选项值为firebase返回的分类值，所有option的value集合里不存在和初始state匹配的项。React对受控select有强校验规则，如果绑定的value找不到对应匹配的option，就会出现逻辑值已更新、UI卡在默认选项的异常。
• 类型不兼容：DOM原生option的value最终会被序列化为字符串，传入null会被自动转成字符串"null"，和state里的类型、值都无法严格相等匹配，直接导致匹配逻辑失效。

另外代码存在冗余：你既在constructor里手动绑定setCategory的this指向，又将方法定义为自带this绑定的箭头函数，重复绑定虽然不直接报错，但属于无意义冗余。

修复步骤 #

• 将state中category的初始值和默认option的value统一为空字符串""，保证值和类型完全匹配
• 删除重复的this绑定逻辑，手动bind和箭头函数二选一即可
• （可选）渲染option时把迭代变量重命名，避免和外层从data解构的value重名，降低后续出隐蔽bug的概率

修复后可运行代码 #

class Formm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      detail: "",
      cost: 0,
      category: "" // 初始值统一为空字符串
    };
    console.log(this.state);
  }
  // 箭头函数自动绑定外层this，无需额外在constructor里bind
  setCategory = (e) => {
    this.setState({ category: e.target.value });
    console.log(e.target.value)
  };
  render() {
    const { detail, cost, category } = this.state;
    return (
      <div>
        <FirebaseDatabaseProvider firebase={firebase} {...firebaseConfig}>
          <FirebaseDatabaseNode path="category/">
            {(data) => {
              const { value } = data;
              if (value === null || typeof value === "undefined") return null;
              const categoryList = Object.values(value); // 重命名避免和外层value重名
              return <div className="row justify-content-center">
                <div className="form-group col-md-6">
                  <label htmlFor="">Insert the type:</label>
                  <select
                    onChange={this.setCategory}
                    value={category}
                    className="form-control"
                  >
                    {/* 默认选项value和初始state保持一致，不用null */}
                    <option value="">Select the option</option>
                    {categoryList.map((item) => {
                      return (
                        <option key={item} value={item}>
                          {item}
                        </option>
                      );
                    })}
                  </select>
                </div>
              </div>;
            }}
          </FirebaseDatabaseNode>
        </FirebaseDatabaseProvider>
     </div>
    )
  }
}

修复后select的受控值和option的value可以严格匹配，选择选项后setState触发重渲染时，React能正确找到对应选中的option，UI就会正常同步更新。

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