render a variable foreach in react

Question

On React (Next.js), I am trying to make a counter for adding records to the PostgreSQL database (>30,000 records) (for import from EXELL). The addition procedure works quite quickly, but I still want to make a counter that would be displayed when this procedure is launched and output the current record. In my code, the counter is output to console.log , but not rendered on the screen. And it is not displayed in either when insertRows.current > 0 or when setIsInsert(true). What is wrong, and whether it can be implemented somehow. I wanted to use useEffect() , but I think it's only used when getting data before the initial rendering. I guess I still don't know much about Refct? Please help implement this, or suggest something else to

import { useEffect, useState, useRef } from "react"

  export default function insertCounter() {
  const insertRows = useRef(0) //number of inserted records
  const [insRows, setInsRows] = useState(0) //number of inserted records
  //const [isInsert, setIsInsert] = useState(true) // Visual ProgressBar

  const data = [
    { id: 1, name: "Roman" },
    { id: 2, name: "Misha" },
    { id: 3, name: "Vova" },
  ]

  const addRows = (data) => {
     try {
      data.forEach((row) => {
        // const cInsert = insertToPSQL(row) //Insert record to PostgreSQL (async function)

        insertRows.current = insertRows.current + 1
        setInsRows(insRows+1)
        console.log("insertRows.current=", insertRows.current)
        console.log("insRows=", insRows)
      })
    } finally {
      console.log("insertCounter.js/addRows/finally/insertRows.current=", insertRows.current)
      alert(`finally:Added ${insertRows.current}`)
      insertRows.current = 0
      setInsRows(0)
    }
  }
  const handleInsert = () => {
    insertRows.current = 0
    // setIsInsert(true)
    addRows(data)
  }

  useEffect(() => {
    //?????????????????? /
  }, [])

  return (
    <div style={{ textAlign: "center", color: "blue" }}>
      <h2 style={{ color: "red" }}>insertCounter</h2>
      <button onClick={handleInsert} style={{ color: "yellow", backgroundColor: "blue" }}>
        Insert
      </button>
      {<div>Added records:{insertRows.current} </div>}
      {<div>Added records:{insRows} </div>}
    </div>
  )
}

The problem is solved. Added the code useEffect(() => { addRows(data) }, [data]) — Роман, Jan 07 '23 at 20:22

score 0 · Answer 1 · answered Jan 04 '23 at 11:13

0

Don't forget that ref in React doesn't trigger a render. If you want to trigger a rerender you should use state instead.

Also you're setting your variable to 0 in the finnaly so at the end of your function, it will always be 0

answered Jan 04 '23 at 11:13

OneQ

1,149
1
8
15

Thank you very much for your reply! You probably did not understand the essence of the problem well. I need to output the value of the counter inside each loop, so I reset it to zero at the end of the loop. I have already tried the code with useState, so even in console.log it does not change the value inside the cycle in , and useRef changes in each cycle, which is displayed in console.log, but unfortunately does not cause rendering. Here is the code with useState and useRef. Maybe there are some other ideas? – Роман Jan 07 '23 at 19:37
So if you have 60 rows you would like to show `insRows` from 0 to 60 ? – OneQ Jan 07 '23 at 19:52
So. You got it all right. I already tried to add the code to useEffect, but then it also crashes only after the end of the loop. useEffect(() => { addRows(data) }, [data]) – Роман Jan 08 '23 at 08:45
So it is not good as you said in your comment in your post ? – OneQ Jan 08 '23 at 09:54
So my code doesn't work as I want it to. Sorry for the mistakes in the text. Unfortunately, I don't know English (it's too late to learn), so I communicate with the help of Google Translate. – Роман Jan 08 '23 at 14:16

render a variable foreach in react

1 Answers1