Firebase数据映射至React useState后返回空列表求助

你的代码核心问题有两个：

• 直接在组件顶层调用setUserData(a)，这会触发不必要的重渲染，而且当display从Firebase加载完数据更新后，这段代码不会重新执行，导致userData始终是初始的空数组。
• userData没有和display状态联动，数据更新链路断裂。

下面是两种可行的修复方式：

方案一：移除多余的userData状态（推荐） #

既然userData完全由display派生而来，没必要单独维护这个状态，直接在渲染时基于display生成图表数据即可：

function BarChart(){
  const moneyCollectionRef = collection(db,"dailyData")
  const [display,setDisplay] = useState([]);

  useEffect(()=>{
    getUsers()
  },[]);

  const getUsers = async () =>{
    const data = await getDocs(moneyCollectionRef);
    setDisplay(data.docs.map((d)=>({
      ...d.data(),
      id:d.id
    })));
  };

  // 直接基于display生成图表所需数据
  const chartData = {
    labels: display.map(d => d.dayNumber),
    datasets:[{
      label:"Daily Expense",
      data: display.map(d => d.sum),
    }],
  }

  return <Bar data={chartData} />;
}

export default BarChart;

方案二：保留userData，通过useEffect联动更新 #

如果一定要保留userData状态，需要添加一个监听display变化的useEffect，当display更新时同步更新userData：

function BarChart(){
  const moneyCollectionRef = collection(db,"dailyData")
  const [display,setDisplay] = useState([]);
  const [userData,setUserData] = useState({
    labels: [],
    datasets:[{
      label:"Daily Expense",
      data: [],
    }],
  });

  useEffect(()=>{
    getUsers()
  },[]);

  // 监听display变化，同步更新userData
  useEffect(() => {
    setUserData({
      labels: display.map(d => d.dayNumber),
      datasets:[{
        label:"Daily Expense",
        data: display.map(d => d.sum),
      }],
    })
  }, [display])

  const getUsers = async () =>{
    const data = await getDocs(moneyCollectionRef);
    setDisplay(data.docs.map((d)=>({
      ...d.data(),
      id:d.id
    })));
  };

  return <Bar data={userData} />;
}

export default BarChart;

这样修改后，当display从Firebase获取到完整数据后，图表就能拿到包含所有dayNumber的列表了。

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