0

I am trying to make a simple app where I could record shrinkage of material. The input parameters are the first and second material thickness. Below is my fetch data where I query through the values I would like to display and this works fine for displaying those filtered items.

I try and only set my delta values inside my collection I console.log the array to see what is inside and also try to find the sum of this array.

const [firstPara, setFirstPara] = useState("");
const [secondPara, setSecondPara] = useState("");
const [deltaList, setDeltaList] = useState([0]);
const [theAmountData, setTheAmountData] = useState(null);

const fetchData = async () => {
   const weldShrinkageQuery = query(collection(db, "WeldShrinkageRecord"), 
   where("firstMaterialThickness", "==", firstPara), 
   where("secondMaterialThickness", "==", secondPara),
   );
   const theData2 = await getDocs(weldShrinkageQuery);
        
   setTheAmountData(theData2.docs.length)
   setDeltaData(theData2.delta)

   // filter only delta values inside of query
   const filteredDeltaValues = theData2.docs.map((doc) => ({
      delta: doc.delta,
   }))
   setDeltaList(filteredDeltaValues);


   console.log("this is the array: " + deltaList)

   // try to find addition of array
   let addition = deltaList.reduce((value, sums = 0) =>
   sums = sums + value.delta);

   console.log(addition)
   };

this is how my values are stored in firestore:

enter image description here

when running the script I get:

enter image description here

M Charry
  • 1
  • 1
  • Please edit your question to show: 1) How the two snippets are related. In fact, it's typically best to ensure all the necessary code is in a single snippet that we can copy/paste to run and reproduce the problem. 2) How `deltaList` is initialized. – Frank van Puffelen Aug 22 '23 at 13:41

1 Answers1

0

My guess is that you declare deltaList as:

const [deltaList, setDeltaList] = useState();

This means that deltaList doesn't have an initial value. If you then calculate the average of it before it gets a value, you'll get the error you posted.

The simplest fix is to initialize deltaList as an empty array with:

const [deltaList, setDeltaList] = useState([]);
                                       //

From reading the MDN docs for the error, it seems that reduce in this overload uses a value from the array as its initial value - so you can't pass an empty array.

So you can pass an array with 0 as its only value:

const [deltaList, setDeltaList] = useState([0]);
                                        //
Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Hello Frank, thanks for your reply!. Sorry, I forgot to add this part. I have edited my question. I still get the same error. – M Charry Aug 22 '23 at 14:09
  • Frank thanks again for your reply, I tried this and my output is 0. The state isn't setting – M Charry Aug 22 '23 at 15:54
  • So the error you posted is gone? Does it make sense, based on what I explained, why you were getting the error - and why the change removes that error? --- After that you'll want to set a breakpoint on `setDeltaList(filteredDeltaValues);`, run in a debugger, and see what value you are setting. – Frank van Puffelen Aug 22 '23 at 17:17
  • I think I get it, by `setDeltaList(filteredDeltaValues)` I am setting all values inside my collection. If I would only like to set my delta values that are inside of deltaList, how would I be able to do so? – M Charry Aug 22 '23 at 17:25
  • Is your latest edit really how the two code blocks are in your app? That will never work, because [setting state is an asynchronous operation in React](https://stackoverflow.com/questions/36085726/why-is-setstate-in-reactjs-async-instead-of-sync). – Frank van Puffelen Aug 22 '23 at 18:21
  • yes, the latest edit is how I have my app currently. I am very new at js / react, any suggestions on what I could do to fix this? – M Charry Aug 22 '23 at 21:32
  • Did you check the link I shared in my previous comment? That explains the second problem you have. --- Third problem is then how to read a specific field from each document in your query results. --- I recommend simplifying the problem, as we're three problems deep into a use-case. E.g. ignoring ReactJS and any web framwork, just in plain JavaScript: can you read a bunch of documents and then get a field from each document in the resuliting `QuetySnapshot`? If that works, adding ReactJS to it becomes just one more step, rather than one of a string of problems. – Frank van Puffelen Aug 22 '23 at 22:59