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

Posted 2023-03-17

【中文标题】反应选择下拉菜单未在获取时更新

【英文标题】：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  />

              <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  style=borderRadius:"50%" />
                  <p>userdata.name</p>
              </div>
        </header>
        <Toptracks userdata=userdata/>
      </React.Fragment>
    )
  



export default Home;

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

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

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

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

非常感谢任何帮助:)

【参考方案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();
  , [])