在Firebase数据库中进行更改并返回其初始状态后，未（重新）设置React状态

Question

我想在Firebase数据库中发生更改后重置状态。我的代码如下所示：

 const [lists, setLists] = useState({});

 //GET THE DATA FOR THE LISTS
  useEffect(() => {
    async function fetchData() {
      let dataObject = {};
      await listsRef.once('value', snap => {
        snap.forEach(function(result) {
          firebase
            .database()
            .ref('lists')
            .child(result.key)
            .on('value', snap => {
              dataObject[snap.val().id] = snap.val();
              setLists(dataObject);
            });
        });
      });
    }
    fetchData();
  }, [props.ListUpdated]);

  return Object.getOwnPropertyNames(lists).length > 0 ? (
    <React.Fragment>
      <StyledMain role="main">
        <Layout currentUser={currentUser}>
          {Object.keys(widgets).map(key => {
            return (
              <Card
                id={widgets[key].typeId}
                key={widgets[key].typeId}
                type={widgets[key].type}
                UserIndicator="right"
              >
                <CardContent scrollbar={false}>
                  {createComponent(lists)}
                </CardContent>
              </Card>
            );
          })}
        </Layout>
      </StyledMain>
    </React.Fragment>
  ) : (
    <div>Loading</div>
  );

但是在Firebase数据库中发生更改后，该列表并未设置并显示其初始状态。

为什么不使用数据库中的新值重置状态？