useState 没有正确更新数组

Question

I'm using React with Firebase to fetch data from firestore and display it to the user. Within a useEffect hook, I fetch the data and add it to an array of json objects. However, when adding a new element to the array, the previous one gets deleted. Below will be relevant portions of code.

const [items, setItems] = useState([]);
const [isLoading, setLoading] = useState(true);
const { currentUser } = useAuth();

function addItemToList(i) {
  const updatedList = [
    ...items,
    {
      data: i.data(),
      ref: i.ref
    }
  ]

  return updatedList;
} 
useEffect(() => {
  firestore.collection('items').where('uid', '==', currentUser.uid).get().then((itemSnapshot) => {
    itemSnapshot.forEach((doc) => {
      setItems(addItemToList(doc));
    })
  })
  setLoading(false);
}, []);

I've also tried updating the items list within the useEffect hook, but it produces the same bug.

Answer 1

You need to add "addItemToList" to the dependencies of the useEffect hook.

Because you haven't done this, the effect references an old version of that function which references an old version of the items array.

Answer 2

You just use itemSnapshot.map like this:

firestore.collection('items').where('uid', '==', currentUser.uid).get().then((itemSnapshot) => {
    setItems(
      itemSnapshot.map((doc) => ({
        data: i.data(),
        ref: i.ref,
      })),
    );
  })

Answer 3

Let me take a moment to explain what is happening here.

Your have to think in your react component as a "Snapshot", where a snapshot is the result of a render. Each snapshot points to a state created by useState and only to that one. What does this mean?

The first time your component renders (first snapshot) the items variable returned by useState is pointing to an empty array and as long as that snapshot is alive it would be pointing to that array.

So, lets take a look to the function called by useEffect

  firestore.collection('items').where('uid', '==', currentUser.uid).get().then((itemSnapshot) => {
    itemSnapshot.forEach((doc) => {
      setItems(addItemToList(doc));
    })
  })
  setLoading(false);

you are calling the set function for items once per elemtent in firebase query result and each call is seting a value that is the result of calling addItemToList

function addItemToList(i) {
  const updatedList = [
    ...items,
    {
      data: i.data(),
      ref: i.ref
    }
  ]

  return updatedList;
} 

the point here is that you are always destructuring...items which is always the items variable that the snapshot of the component is pointing to and it would not be updated until the component re rederds.

So, basically you all aways doing updatedList = [...[], {... } ] becauses items has to wait to take update his value.

@Viet already responded with something good, which I think it's the best option

mapping the result of the query to an array and updating the array with the result of the map a parameter.

useEffect(() => {
  firestore.collection('items').where('uid', '==', currentUser.uid).get().then((itemSnapshot) => {
    const result = [];
      itemSnapshot.forEach((doc) => {
        result.push({
          data: i.data(),
          ref: i.ref
        });
      })
    setItems(result);
  })
  setLoading(false);
}, []);

Answer 4

Instead of running it for each value maybe you should try to map it as a list and update the state once

function addItemsToList(newItems) {
  const updatedList = [
    ...items,
    ...newItems
  ]

  return updatedList;
} 

useEffect(() => {
  firestore.collection('items').where('uid', '==', currentUser.uid).get().then((itemSnapshot) => {
    const docs = itemSnapshot.map((doc) => ({
       data: doc.data(),
       ref: doc.ref
    });
    setItems(addItemsToList(docs));
  })
  setLoading(false);
}, []);

Answer 5

You are using spread operator in a wrong way! This way will not update the array.

You can do that by using es6 spread to concat multiple arrays something like below:

const updatedList = [
    ...items,
    ...[{ data: i.data(), ref: i.ref }]
  ]

To know more: Using es6 spread to concat multiple arrays