0

Использую состояния в связке с контекстом для работы с данными "todo", храню все данные в одном классе для удобства (сам класс работает проверял все выводы через логи), но вот после изменеия не срабатывает setState

App

function App() {
  
  const [todoList, settodoList] = useState(new TODOList)
  todoList.UpcomingTasks.GenerateTestData()
  todoList.Remove(1)


  return (
    <div className="App">
      <DataContext.Provider  value={{todoList, settodoList}} >
        {/* <AddTaskModal/> */}
        <Head />
        <Body />
      </DataContext.Provider>
    </div>
  );
}

Body

const Body = function () {
    
    return (
      <div className={style.Body}>
          <strong>All Task</strong>
          <TodoList/>
      </div>
    )
}

List

const TodoList = function () {

    if (todoList.UpcomingTasks.data.length) {
        return(
            <div>
              {todoList.UpcomingTasks.data.map(todo =>  {return <TodoItem todoItem={todo} key={todo.id}/>}  )}
            </div>
        )
    }
    else
    {
        return <div><strong>No assignments upcoming, it looks like it's time to rest</strong></div>
    }
}

Item

    const TodoItem = function ({todoItem}) {
    
        const {todoList, settodoList} = useData()
    
        return (
            <div className={style.Item}>
                <div className={style.LeftBlock}>
                    {/* <button class={style.Checkbox} onClick={() => { dataTodoList.ToggleToDo(id = todoItem.id, upcoming = true) }}></button> */}
                    <span className={style.TodoTitle}>{todoItem.title}</span>
                </div>

                //По клику на данную кнопку должно происходить удаление задачи, 
                //заддача удаляется из класса, но не происходит изменения состояния и она 
                //продолжает отображаться, хотя в массиве задач ее уже нет 
                <button className={style.Delite} onClick={() => {todoList.Remove(todoItem.id); settodoList(todoList);  console.log("Removed"); console.log(todoList)}}>
                    <img src={trash} alt="" />
                </button>
            </div>
        )
    }

Ps: useData <=> useContext(DataContext), Изучаю React и js недавно, буду рад любой помощи, заранее спасибо

1 ответ 1

0

Вы не изменяете стейт. Вы создаете экземпляр класса TODOList, передаете в провайдер ссылку на этот экземпляр, что-то в нем меняете и в settodoList передаете ссылку на этот же экземпляр. Фактически для реакта ничего не меняется, т.к. в стейте находилась ссылка именно на этот же экземпляр.

Передавайте в settodoList новый экземпляр класса.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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