How to prevent double data fetching, interferes when rendering html to an element

const _d = document; const buttonMore = _d.getElementById('myButton') let num = 0; async function main() { const response = await fetch(`http://127.0.0.1:8000/api/v1/?page=${num}`) const jsonData = await response.json() console.log(jsonData) const mapData = await jsonData.data.map((i) => { return `<h3>${i.attributes.title}</h3>` }) // check for data counts if (jsonData.data.length < 10) buttonMore.style.display = "none" _d.getElementById('root').insertAdjacentHTML('beforeend', mapData.join('')) } buttonMore.addEventListener('click', (e) => { num++ return main(); })

interferes with the fact that by clicking, it is rendered twice, that is, it repeats the same elements twice

two fetching

2x

webpack.config.js

 const webpack = require('webpack'); const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); module.exports = { entry: ['@babel/polyfill', './index.js'], output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, plugins: [ new HtmlPlugin({ hash: true, template: './src/index.html' }) ], module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000 }
  • Does console.log(jsonData) duplicate data, or as page-by-page? - Rustam Gimranov
  • displays double data, and it is conceived that it will take a click from another page on the click and add it via the insertAdjancentHTML method - htaccess
  • The word return from the line where insertAdjacentHTML exactly needs to be removed. And attach a picture that displays in the console once. - Rustam Gimranov
  • not enough information to explain the behavior that you observe - Igor
  • one
    In this sample code, a double call will occur when the above code is executed twice and two event handlers are created per button, which will start the main function two times. If this happens without a webpack, it means that the webpack does not correctly assemble the bundle. - Stepan Kasyanenko

0