React select下拉框获取数据后不更新渲染问题求助

问题根源 #

核心是异步执行顺序错误+引用类型state未正确更新：

1. firebase.database().ref().once()为异步API，传入的回调不会同步执行。代码调用once()后会立刻执行setHistoryLogs(historyLogs)，此时回调还未触发，存入state的是未填充数据的空数组。
2. 后续firebase回调触发时，仅直接修改了已存入state的数组内容，没有重新调用setHistoryLogs。React对state做浅比较，数组引用未发生变化，不会触发组件重渲染，因此视图没有更新。
3. 控制台能打印出完整数组是因为浏览器控制台保存的是数组引用，展开查看时回调已经执行完毕，数组内容已被修改；热更新会触发组件强制重渲染，读取当前数组内容，因此能正常显示选项。

修复方案 #

二选一即可：

方案1：将state更新移入firebase回调 #

确保拿到所有数据后再触发state更新：

useEffect(() => {
  async function firstRun(){ 
    const userdata = await (await fetch("/me")).json();
    setUserdata(userdata);
    // 把setHistoryLogs移到回调内部
    firebase.database().ref(userdata.id).once("value", function(snapshot){
      const historyLogs = []
      snapshot.forEach(child => {
        historyLogs.push(child.key);
      })
      setHistoryLogs(historyLogs);
    });
  }
  firstRun();
}, [])

方案2：用Promise形式await异步查询结果 #

firebase的once方法不传回调时会返回Promise，可使用await做同步写法：

useEffect(() => {
  async function firstRun(){ 
    const userdata = await (await fetch("/me")).json();
    setUserdata(userdata);
    // 等待查询结果返回后再处理数据
    const snapshot = await firebase.database().ref(userdata.id).once("value");
    const historyLogs = []
    snapshot.forEach(child => {
      historyLogs.push(child.key);
    })
    setHistoryLogs(historyLogs);
  }
  firstRun();
}, [])

额外优化建议 #

• 给state设置初始默认值：const [historyLogs, setHistoryLogs] = useState([]);，避免空值判断异常。
• 渲染列表项时添加唯一key属性，符合React规范：

historyLogs.map(log => {
  return <option key={log} value={log}>{log}</option>
})

• 移除option上的selected属性，改为给select标签绑定value属性做受控组件，更符合React使用规范。
• 如果初始化historyLogs为空数组，可以将渲染条件调整为if(!userdata) return null，空数组也可以正常渲染下拉框。

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