Почему перезагружается React приложение при axios.post?

Question

[VloVer]

Суть вот в чем: Я при помощи axios.post хочу закинут пост в db, но когда я при клике на кнопку добавить закидываю новый пост, то он выводится на секунду, потом страница перезагружается, и он уже отображается, с чем может быть связанно?

Comments

[Vitaliy]

Причин может быть сотня. Ставьте брекпоинт на Load события в подменю "Event Listener Breakpoints" в Devtools и смотрите что выполняется перед обновлением страницы

[VloVer]

Виталий Столяров, может я скину код?
архивом

[Pavel Shvedov]

VloVer, щас бы левые архивы из интернета качать, лучше воспроизведи в какой-нибудь онлайн песочнице, jsfiddle, stackblitz, ..., и скинь сюда ссылку

[VloVer]

Виталий Столяров, А где посмотреть что происходит?
вот что выдает

[alex kapustsin]

Нужен код компонента

[VloVer]

Суть такая я делаю пост через axios, и так понимаю что это он обновляет страницу, как это убрать? Я пробую через e.preventDefault(), но оно выдает ошибку ниже код

<button 
              onClick={(e) => {    
                     addList(e);

                  }}
               className="folder-modal__button">
               Добавить
            </button>

const addList = () => {
      if(!inputValue) {
         
         alert('Введите название папки!');
         return;
      }

      axios.post('http://localhost:3001/lists', { name: inputValue,colorId: selectedColor})
         .then(({data}, e) => {
         e.preventDefault();
         const color = colors.filter(c => c.id === selectedColor)[0].name;
         const obj = { ...data, color: {name: color}}
         onAddList(obj);
         onClose();

      });
   }

[alex kapustsin]

Вы передаёте еvent в функцию но в функции ее нет в параметрах. Поэтому e.preventDefault() и не работает. Добавьте е в параметры функции и перенесите e.preventDefault() в самое начало функции.

[VloVer]

alex kapustsin, пробовал, не помогает

[VloVer]

alex kapustsin, Точнее ошибки нету в таком случае но проблема с перезагрузкой не пропадает

[VloVer]

Код всего компонента
alex kapustsin,

import React, {useEffect, useState} from 'react';
import { useId } from "react-id-generator";
import axios from 'axios'

import './sidePanel.css';
import FolderItem from '../folderItem'
import add from './img/add.svg';
import all from './img/all.svg';
import close from './img/close.svg';



const SidePanel = ({}) => {
   const [itemId] = useId();
   const [selected, changeSelected] = useState(false);
   const [selectedColor, selectColor] = useState(1);
   const [colors, setColor] = useState([]);
   const [lists, setLists] = useState([]);
   const [inputValue, setInputValue] = useState('');    

    useEffect (() => {
       
      
      axios.get('http://localhost:3001/lists?_expand=color').then(({ data }) => {
         setLists(data);
         
         
      });
      axios.get('http://localhost:3001/colors').then(({ data }) => {
         setColor(data);        
         
      });


      if(Array.isArray(colors) && colors.id){
         selectColor(colors[0].id)
      }
      

      
   }, [])
   const onAddList = (obj) => {

      const newList = [
         ...lists,
         obj
      ]
      setLists(newList);     
   }

   const onClose = () => {
      changeSelected(false);
      setInputValue('');
      selectColor(colors[0].id);
   }
   
   
   const addList = (e) => {
      e.preventDefault();

      if(!inputValue) {
         
         alert('Введите название папки!');
         return;
      }

      axios.post('http://localhost:3001/lists', { name: inputValue,colorId: selectedColor})
         .then(({data}) => {
         const color = colors.filter(c => c.id === selectedColor)[0].name;
         const obj = { ...data, color: {name: color}}
         onAddList(obj);
         onClose();

      });
   }
   

   let modalClass = "folder-modal";

   if(selected){
      modalClass += " show"
   }

   return (
      <div className="side-panel">
         <div className="side-panel__button-all ">
               <button>
                  <img src={all}></img>
                  Все задачи
               </button>
         </div> 

         <FolderItem items={lists} color={colors} onRemove={list => {
            console.log(list);
            
         }}/>

         <div className="side-panel__button-all-folder ">
               <button
                  onClick={() => changeSelected(true)}> 
                  <img src={add}></img>
                  Добавить папку
               </button>
         </div> 

         <div className={modalClass}>
            <img onClick={onClose} className="close" src={close}></img>
            <input 
               value={inputValue}
               onChange={(e) => {                  
                  setInputValue(e.target.value)
               }} 
               type="text"
               placeholder="Название папки"></input>
            <div className="folder-cyrcle__color-block flex">
               {/* Рендерим цвета */}
               {colors.map((color) => (
                  <div 
                     key={color.id} 
                     onClick={() => selectColor(color.id)}
                     className={selectedColor === color.id ?  `cypcle cypcle-${color.name} selected` : `cypcle cypcle-${color.name}`}>
                  </div>
               ))}
            </div>
            <button 
               onClick={(e) => {    
                     addList(e);
                  }}
               className="folder-modal__button">
               Добавить
            </button>
         </div>
      </div>
   )
}

export default  SidePanel;

[luzianin999]

Попробуй e.persist()

[VloVer]

luzianin999, где именно в then()? или в верху функции?