在 reactJS 中从 Firebase 获取数据时无法在功能组件中设置状态答案

【问题标题】：cannot set State in functional component while fetching data from Firebase in reactJS在 reactJS 中从 Firebase 获取数据时无法在功能组件中设置状态
【发布时间】：2020-12-10 14:34:39
【问题描述】：

useEffect(() => {
console.log("mounted");
all.db.ref("NewDonor").on("child_added", (data) => {
  var DataFromDB = data.val();
  state.donor.push(DataFromDB);
  console.log(state.donor);
  setState({
    donor: DataFromDB,
  });
});

}, [0]);

这是我的一些代码.. 我想从 firebase 获取数据并添加到我的状态并在 DOM 上呈现，但无法设置状态..它显示错误， state.donor.map 不是函数

【问题讨论】：

这并不是状态在功能组件中的工作方式。寻找useState 钩子:)
setState 用于基于类的组件，您是否使用 useState 挂钩定义了您的状态？

标签： arrays reactjs firebase dictionary state

【解决方案1】：

假设你的状态是一个数组

const [state, setState] = useState({ donor: [] });

那么这就是你将如何更新它。将任何现有状态传播到一个新数组中，然后还将新数据传播到数据库中。这可确保state.donor 保留为稍后映射的数组。我也不认为[0] 是一个有效的依赖数组，似乎你只想在组件挂载时触发效果，所以一个空的依赖数组可以工作。

useEffect(() => {
  all.db.ref("NewDonor").on("child_added", (data) => {
    const DataFromDB = data.val();
    setState(prevState => ({
      donor: [...prevState, ...DataFromDB],
    }));
  });
}, []);

【讨论】：