0

проблема с React, не обновляет стейт когда я делаю функцию обновления, я обозначил комментарии где не работает обновления стейта, а именно setActiveItem('main') в функции deleteListItem. Функция принимает в себя id удаляемого элемента со списка, но это не касается ошибки. Проблема именно в обновлении стейта, туда просто должна заходить строка и все, коме этой функции на стейт ничего не влияет. Спасибо

Вы можете писать что вам нужно объяснить по коду, я на связи) Буду рад если кто-то поможет открыть глаза на возможную проблему. Спасибо

import axios from "axios";
import React from "react";

import AddItem from "./components/AddItem/AddItem";
import ItemList from "./components/ItemList/ItemList";
import listSVG from './assets/img/list.svg';
import Tasks from "./components/Tasks/Tasks";
import './index.scss';
import './media.scss';

function App() {

 let [list, setList] = React.useState([]);
 let [colors, setColors] = React.useState([]);
 let [activeItem, setActiveItem] = React.useState('main');

 React.useEffect(() => {
   axios.get('http://localhost:3100/lists')
     .then(({data}) => setList(data))

   axios.get('http://localhost:3100/colors')
     .then(({data}) => setColors(data))
 }, [])

 function addListItem(newItem){
   let newList = [...list, newItem]
   axios.post('http://localhost:3100/lists', newItem)
     .then(setList(newList)) // РАБОТАЕТ
     .then(setActiveItem(newItem.id))
 }

 function deleteListItem(deleteItemId){
   let newList = list.filter(item => {
     return item.id !== deleteItemId
   })
     console.log('1') /// КОНСОЛЬ ЛОГ РАБОТАЕТ
     setActiveItem('main') /// НЕ РАБОТАЕТ
     console.log('1') /// КОНСОЛЬ ЛОГ РАБОТАЕТ
   axios.delete(`http://localhost:3100/lists/${deleteItemId}`)
     .finally(setList(newList))
 }

return (
   <div className="todo">
     <div className="todo__tasks">
       {list.length !== 0 && <>
         <ItemList name='Все задачи' onRemovable={false} image={listSVG} 
           activeItemFn={(id) => setActiveItem(id)} id={'main'} activeItem={activeItem}/>
         <div className="todo__tasks-active">
           {list.map(item => (
             <ItemList key={item.id} name={item.name} onRemovable={true} id={item.id} color={
               colors.find(color => item.colorId === color.id)
             } activeItemFn={(id) => setActiveItem(id)} activeItem={activeItem} deleteListItem={deleteListItem} />
           ))}
         </div> 
       </>}
       <AddItem colors={colors} addListItem={addListItem} name="Добавить папку" />
     </div>
   </div>
 );
}

export default App;

Кусок с другой части кода : при нажатии на кнопку <button className='button item__confirm-delete' onClick={confirmationDelete}>Удалить</button> исполняется функция
function confirmationDelete(){ deleteListItem(id); setCheckDelete(false); }

1 ответ 1

0

см. комментарии ниже.

function addListItem(newItem) {
  let newList = [...list, newItem];
  axios
    .post("http://localhost:3100/lists", newItem)
    // Неправильная запись. then принимает callback функцию, а вы передаете результат вызовы ф-ции
    /*.then(setList(newList)) 
      .then(setActiveItem(newItem.id));*/
    .then(() => {
      setList(newList)
      setList(newList)
      setActiveItem(newItem.id)
    })
}

function deleteListItem(deleteItemId) {
  let newList = list.filter((item) => {
    return item.id !== deleteItemId;
  });
  axios
    .delete(`http://localhost:3100/lists/${deleteItemId}`)
    //опять результат передаете
    /*.finally(setList(newList));*/
    .then(() => {
      setList(newList);
      setActiveItem("main"); // сюда правильней перенести
    });
}

8
  • 1. Добрый день, спасибо за ответ. При вызове функции deleteListItem() activeItem уже не main , а id элемента ( на скриншоте обозначено красным) (скриншот - prnt.sc/ZxoVmpCOjXcp ) . После нажатия на крестик -> потом на кнопку удалить происходит вызов функции где и должен поменяться activeItem, но... посмотрите на скриншот ( скриншот - prnt.sc/b2CpMiS4kMaz ) 2. Тут проблемы нет . Попробовал ваш вариант, работает так же) Но стейт все равно не меняется(
    – admin
    Commented 26 мар. 2022 в 12:08
  • прикрепите компоненты в которых происходит вызов addListItem, deleteListItem
    – xydope
    Commented 26 мар. 2022 в 14:44
  • codesandbox.io/s/condescending-fire-c5f9js?file=/src/…
    – admin
    Commented 26 мар. 2022 в 16:02
  • Я решил эту проблему добавив useEffect, но вам не кажется такой метод костыльный? И почему все таки не работает прямой вызов? НЕ ПОНИМАЮ ( скриншот 1 : prnt.sc/fBCZEkB3Hyns ) ( скриншот 2 : prnt.sc/aOzM_7lVcFJL )
    – admin
    Commented 26 мар. 2022 в 16:15
  • 1
    Поработайте над кодом своим, постарайтесь упростить, т.к. у вас гора пропсов передается потомкам. Запросы к серверу имеет смысл вынести в отдельный хук и т.п. + ItemList, который вы назначаете как main, скорей всего, лучше сделать как отдельный компонент, чтобы не перекидывать туда-сюда лишние пропсы. У вас в 1 компоненте 3 стейта, повод задуматься, на правильном ли вы пути, возможно, лучше применить Контекст?
    – xydope
    Commented 26 мар. 2022 в 16:47

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.