React select 下拉列表未在获取时更新

Question

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


 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"]

我有趣地发现，如果我对我的本地服务器的代码进行任何更改运行，它就会更新，因为它应该放在第一位：

非常感谢任何帮助:)

Answer 1

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

Your once code is in an asyncronous event listener, which means it's running after you set your state to [ ]. You should call setHistoryLogs inside of once instead.

最终解决方案：

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();
  }, [])

React select 下拉列表未在获取时更新

React select dropdown not updating on fetch

javascript

fetch

reactjs

use-effect

use-state