Блог

Главная - Вопросы по программированию - Реализация функции отмены / повтора в react

Реализация функции отмены / повтора в react

#reactjs #react-state

#reactjs #состояние реакции

Вопрос:

Я пытаюсь реализовать простую функцию отмены / повтора в моем приложении react. Итак, я пытаюсь сохранить массив со старыми значениями состояния. Но когда я проверяю значения старых состояний, все они обновляются с новым состоянием.

состояние :

 state = {
        schedule : [],
        loads:[],
        undo:[],
        redo:[]
    };

const redoUndoObj ={
        oldStateSchedule : [...this.state.schedule],
        oldStateLoads : [...this.state.loads]
  }
       
  this.setState({ undo : [ ...this.state.undo , redoUndoObj]});

Комментарии:

1. Мне бы хотелось увидеть больше кода, прежде чем я смогу дать какой-либо хороший совет.

2. Моя идея состоит в том, чтобы получить последнее состояние из массива отмены и обновить его вместе с ним, к сожалению, я застрял здесь

3. Надеюсь, мой ответ ниже даст вам идеи о том, как решить эту проблему.

Ответ №1:

Я надеюсь, что это даст вам представление о том, как решить эту проблему. Я создал код только для отмены сейчас, чтобы указать вам правильное направление. Этот пример я сделал с помощью функционального компонента React, используя useState вместо Component class .

     const [schedule, setSchedule] = useState([]);
    const [loads, setLoads] = useState([]);
    const [undo, setUndo] = useState([]);
    const [redo, setRedo] = useState([]);

    const updateData = (newSchedule, newLoads) => {
    setSchedule([...newSchedule]);
    setLoads([...newLoads]);

    const newUndo = {
      schedule: [...newSchedule],
      loads: [...newLoads],
    };

    setUndo([...undo, ...newUndo]);
  }

  const undoChanges = () => {
    const lastElement = undo[undo.length - 1];
    const copyOfUndo = [...undo];
    
    // Update redo to be able to rollback
    setRedo([...undo]);

    // Set the previous values to Schedule and Loads
    schedule([...lastElement.schedule]);
    loads([...lastElement.loads]);

    // Remove the last element from undo
    lastElement.pop();
    undo([...lastElement]);
  }
Метки: