useEffect 在进行 firestore 调用时覆盖状态而不是附加值

Question

const [data, setData] = useState([])         const getDataFromFirebase = async () => {         let response = await firestore.collection('someDatabase').get()         response.forEach(item => setData([...data, item.data().name]))              }        useEffect(() => {       getDataFromFirebase()    },[])数据被最新值覆盖，而不是将所有值添加到数组中。

Answer 1

原因是添加项目所花费的时间非常少，这就是为什么在反映之前，它被覆盖了。您必须在 setData 中使用 prevState 。试试这个：

const [data, setData] = useState([])

const getDataFromFirebase = async () => {

let response = await firestore.collection('someDatabase').get()

response.forEach(item => setData(prevState => ([

    ...prevState, item.data().name])

  );

}

useEffect(() => {

  getDataFromFirebase()

  },[])

Answer 2

在中使用回调setData

setData(prevState => ([

    ...prevState, item.data().name

]));

Answer 3

let response = await firestore.collection('someDatabase').get()

response.forEach(item => setData([...data, item.data().name]))

我不熟悉firestore，但是这个承诺将被解决一次，你应该做这样的事情：

const dataToAdd = response.map(item => item.data().name)

setData(prevState => ([...prevState, ...dataToAdd])

每次setData调用时您都在重新渲染组件，您不应该在同步循环中执行此操作。

prevState在这里是必需的，因为您正在使用异步函数。dataToAdd从理论上讲，如果您不在其他任何地方更改状态，则在使用解决方案后它应该可以在没有它的情况下工作。

Answer 4

[]在您下面的代码中，即使您稍后更改数据，数据的值也将始终存在。

const getDataFromFirebase = async () => {

         let response = await firestore.collection('someDatabase').get()

         response.forEach(item => setData([...data, item.data().name]))

         

     }

这就是文档所说的

在功能组件的主体（称为 React 的渲染阶段）内不允许发生突变、订阅、计时器、日志记录和其他副作用。这样做会导致 UI 中出现令人困惑的错误和不一致。

在每个循环中调用 setData 不是一个好主意。填充一个数组并将其传递给setData循环完成后。

     const getDataFromFirebase = async () => {

         let response = await firestore.collection('someDatabase').get();

         let newData = [];

         response.forEach(item => newData.push(item.data().name));

         // now set the new data

         setData(prevData=> ([...prevData, ...newData]));

         

         // or you can use Array.concat

         // setData(prevData=> (prevData.concat(newData)));

     }