反应选择下拉菜单未在获取时更新答案

【问题标题】：React select dropdown not updating on fetch反应选择下拉菜单未在获取时更新
【发布时间】：2021-10-25 04:59:31
【问题描述】：

我在使用 React 时遇到了这个问题，我正在尝试使用存储在我的数据库中的日期呈现一个选择下拉列表。数据被成功获取并且状态也被更新，它可以被控制台记录。但是，选择下拉菜单并未按应有的方式呈现：


 function Home(){
  const [userdata, setUserdata] = useState();
  const [historyLogs, setHistoryLogs] = useState();

  useEffect(() => {
    async function firstRun(){ 
      var userdata = await (await fetch("/me")).json();
      var historyLogs = []
      firebase.database().ref(userdata.id).once("value", function(snapshot){
        snapshot.forEach(child => {
          historyLogs.push(child.key);
      })});

      setHistoryLogs(historyLogs);
      setUserdata(userdata);
    }
    firstRun();
  }, [])

  function aver(){
    console.log(historyLogs);
  }

  if(!userdata || !historyLogs){
    return null
  }
  else{

    return (
      <React.Fragment>
        <button onClick={aver}>aver</button>
        <header>
              <img src={logo} height="50px" alt="logo"/>

              <select id="cars" name="carlist" form="carform">
                  <option value="volvo" selected>volvo</option>
                  {
                  historyLogs.map(log => {
                      return <option>{log}</option>
                    })
                  }
              </select>

              <div className="user-info">
                  <img src={userdata.img} height="50px" style={{borderRadius:"50%"}} alt="user img"/>
                  <p>{userdata.name}</p>
              </div>
        </header>
        <Toptracks userdata={userdata}/>
      </React.Fragment>
    )
  }

}

export default Home;

使用我拥有的代码，下拉菜单会在不渲染 historyLogs 列表的情况下呈现，因此它只显示以下内容：

这应该显示在里面（控制台记录）：

(2) ["2021-7-25", "2022-7-25"]

我有趣地发现，如果我在本地服务器运行的情况下对代码进行任何更改，它会首先更新：

非常感谢任何帮助:)

【问题讨论】：

标签： javascript reactjs fetch use-effect use-state

【解决方案1】：

感谢 @click2install 和 @NickServe 在 Reactiflux Discord 服务器上的解决方案：

您的 once 代码位于异步事件侦听器中，这意味着它在您将状态设置为 [ ] 后运行。您应该改为在一次内调用 setHistoryLogs。

最终解决方案：

useEffect(() => {
    async function firstRun(){ 
      var userdata = await (await fetch("/me")).json();

      firebase.database().ref(userdata.id).once("value", 
        function(snapshot){
          var historyLogs = []
          snapshot.forEach(child => {
            historyLogs.push(child.key)
          });
          setHistoryLogs(historyLogs);
        }
      );

      setUserdata(userdata);
    }
    firstRun();
  }, [])

【讨论】：