Вот Код, С Которым Я Работаю:

 function TodoCard() {
  const taskArray = [
    { todo: "pancakes", completed: false, id: 1 },
    { todo: "cornflakes", completed: false, id: 2 },
    { todo: "bananas", completed: false, id: 3 },
  ];

  const [tasks, setTasks] = useState(taskArray);

  function disabledHelper(task) {
    return task.completed === true ? true : false;
  }

  return (
    <div>
      <h1>Testing</h1>
      {tasks.map((task) => {
        return (
          <Button
            className="button"
            variant="contained"
            color="secondary"
            size="large"
            onClick={() => {
              task.completed = !task.completed;
              console.log(task.completed);
            }}
            key={task.todo}
            disabled={disabledHelper(task)}
          >
            {task.todo}
          </Button>
        );
      })}
    </div>
  );
}
 

Моя цель состоит в том, чтобы нажать кнопку, изменить «завершено» на «истина», и в результате кнопка станет отключенной. Журнал консоли на onclick подтвердил для меня, что он работал, однако функция disableHelper запускается только при загрузке страницы.

Я попытался вставить эффект использования, но он выдает ошибки, потому что я помещаю его здесь:

 disabled={useEffect(task => {
disableHelper(task)
})}
 

Я убежден, что мне нужно найти способ применить эффект использования в другом месте или попробовать новый метод все вместе, чтобы помощник запускался, когда я нажимаю кнопку

Есть какие-нибудь идеи о том, как я могу заставить это работать так, как я хочу?

Вопрос

Проблема здесь в том, что вы напрямую изменяете свой объект состояния, поэтому ваш компонент не перенаправляется с обновленным состоянием для повторного вычисления отключенного состояния.

Решение

Обновите свое состояние правильно. Используйте обновление функционального состояния, чтобы мелко скопировать предыдущее состояние в новый массив. Если идентификатор текущей задачи совпадает, скопируйте задачу и переключите статус завершено, в противном случае верните задачу.

 const toggleCompleted = id => {
  setTasks(tasks => tasks.map(task => {
    return task.id === id ? {
      ...task,
      completed: !task.completed
    } : task;
  }));
};
 

disabledHelper Утилита также полностью избыточна, так task.completed как уже является логическим, вы можете просто вернуть ее или, что еще более прямолинейно, установить disabled атрибут напрямую.

Я также предложил бы использовать свойство задачи id , так как, вероятно, есть лучшая гарантия уникальности.

 {tasks.map((task) => {
  return (
    <Button
      key={task.id}
      className="button"
      variant="contained"
      color="secondary"
      size="large"
      onClick={() => toggleCompleted(task.id)}
      disabled={task.completed}
    >
      {task.todo}
    </Button>
  );
})}