useRef Hook issue - ref.current.link.click() firing continuously - reactjs

Question

const csvLinkRef = useRef(null)
const exportFile = () => {
let data= {data:'info'}
//Async Action
dispatch(
getFileData(data,
()=>{
csvLinkRef.current.link.click()
}
))
}
<Button onClick={exportFile}> //run exportFile on click
<CSVLink
filename={'file.csv'}
data={someData}
ref={csvLinkRef}//set ref here
>
Export
</CSVLink>
</Button>
//Async API call using redux thunk
export const getFileData = (data,cb) => async dispatch => {
try{
const res = await callApi('ever.php',data,'POST')// make api call
if(res.status==="00"){
dispatch({
type:GET_ALL_DATA,
data: res.data,
})
}
}catch(error){
console.log(error)
}finally{
cb()
}
}
My issue is csvLinkRef.current.link.click() fires non-stop after the API call. How can I make it fire just once? Is there a way I can 'unset' the ref? Please help.(I'm using react-csv library).
The getFileData action API call is successful and the data is in redux state.
if csvLinkRef.current.link.click fired only once, everything would be fine

Answer 1

I had the same problem. Now it is solved. You can try it...
function CsvExample({ manufacturerList }: IdLinkCreateProps) {
const httpRequests = new HttpRequests()
const csvInstance = useRef<any | null>(null);
const [alertOpt, setAlertOpt] = useState({ isOpen: false, message: '', variant: '' })
const [manufacturer, setManufacturer] = useState<IManufacturerItem | null>(null)
const [quantity, setQuantity] = useState<number>(0)
const [idList, setIdList] = useState<{ idList: string }[]>([])
const header = [{ label: "Digital-Links", key: "idLink" }];
const createIdLink = async () => {
let data: IIdLinkCreate = { manufacturer: manufacturer!, quantity: quantity! }
try {
const result = await httpRequests.idLinkCreate(data)
setSuccessOptions(result)
} catch (error) {
console.log('error on getting trusted manufacturer list: ', error);
}
return
}
const setSuccessOptions = (result: IBackendResult) => {
if (result.success) {
setIdList(result.data);
} else {
setAlertOpt({ isOpen: true, message: 'FAILED', variant: 'danger' })
console.log('error on updating data: ', result.error);
}
}
useEffect(() => {
if (idList && idList.length > 0 && csvInstance?.current?.link) {
csvInstance.current.link.click();
}
}, [idList]);
return (
<div className='id_link_wrapper'>
<AppHeader />
<Alert className="alert_error" variant={alertOpt.variant} show={alertOpt.isOpen} >
{alertOpt.message}
</Alert>
<IdLinkTitlePart />
<IdLinkInputPart
manufacturerList={manufacturerList}
setManufacturer={setManufacturer}
setQuantity={setQuantity}
quantity={quantity}
/>
<Button
onClick={createIdLink}
className='button_element'> CSV EXPORTIEREN
</Button>
<CSVLink
asyncOnClick={true}
headers={header}
data={idList!}
filename="bsedata.csv"
data-interception='off'
ref={csvInstance}
/>
</div>
)
}
export default CsvExample