Why does clicking on a file work 2 times?

Question

React

I make a form to add elements, everything works, but there is one bug, when you click on adding a file, it works 2 times. those 2 times requests the path to the file.
The code:

import React, { useState } from 'react';
import PropTypes from "prop-types";
import {connect} from "react-redux";
import ReactFileReader from 'react-file-reader';

import {addBook} from "../../store/actions/books/books";

const formRef = React.createRef();


const AddScreen = ({addBookDispatch}) => {
   
    const [authorsCount, setCount] = useState([1]);
    const [file, setFile] = useState(null);

    const removeAuthor = () => {
      const arrCount = [];
      for(let i = 1; i <  authorsCount.length; i++){
        arrCount.push(i);
      }
      (arrCount.length !== 0) ? setCount(arrCount) : null;
    }

    const addAuthor = (set, count) => {
      const arrCount = [];
      for(let i = 0; i <=  count.length; i++){
        arrCount.push(i);
      }
      set(arrCount);

    }
    const saveBook = (form) => {
      const data = new FormData(form.current);
      data.append('file',file)
      addBookDispatch(data);
      
    }
    const handleFiles = files => {
      console.log(files);
      setFile(files.base64);
    }
    const handleClickForm = (event, form) => {

        event.preventDefault();
        switch(event.target.dataset.action){
          case `addAuthor`:
            addAuthor(form.setCount, form.authorsCount)
            break;
          case `removeAuthor`:
            removeAuthor(form.setCount, form.authorsCount)
          break; 
          case `saveBook`:
            saveBook(formRef)
          break;
        }
    }

    return  (
     <div className='author'>
        <form ref={formRef} onClick={(e)=>handleClickForm(e,{setCount, authorsCount})}>
          <div>
            <input name='TITLE' type='text' placeholder='заголовок'></input>
          </div>
          <div>
            список авторов
            <div className='author-list'>
                {authorsCount.map(index => (
                  <li key={index}>
                    <div className='author-item'>    
                      <input name='AUTHOR_NAME[]' placeholder='Имя'></input>
                      <input name='AUTHOR_FAMILY[]' placeholder='Фамилия'></input>
                    </div>
                  </li>
                ))}
                <input data-action="addAuthor" type='button' value='+'></input>
                <input data-action="removeAuthor" type='button' value='-'></input>
            </div>
          </div>
          <input placeholder='количество страниц '></input>
          <input placeholder='название издательства' ></input>
          <input placeholder='год публикации'></input>
          <input placeholder='дата выхода в тираж'></input>      
          <input data-action="addAuthor" placeholder='ISBN'></input>
          <button data-action="saveBook">Добавить</button>
        </form>
        <ReactFileReader fileTypes={[".jpeg",".jpg", ".png"]} base64={true} handleFiles={handleFiles}>
         <input type='file' className='btn'/>
        </ReactFileReader>
      </div>  
    )
}


const mapDispatchToProps = (dispatch) => ({
  addBookDispatch(form) {
    console.log(form)
    dispatch(addBook(form));
  }
});

const mapStateToProps = (state) => {
  return {}
}

export {AddScreen};
export default connect(mapStateToProps, mapDispatchToProps)(AddScreen);

Answer 1

Xs, you should ask this question to either react-file-reader :)
Perhaps because you are rendering, and in the example they have a button, but this is just a hypothesis