проблема с 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); }