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

在中使用回调setDatasetData(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)));     }