present : past[past.length - 1] ，这应该返回一个值，但它返回一个完整的数组，就像 slice 方法一样

Question

import React, { useState, useRef, useReducer } from "react";
import "./App.css";

function reducer(state,action){ 
  const {past,present,future} = state
  switch(action.type){
    case 'ADD' : return {

      past : [...past,present],
      present : [...present,{id : Math.random(),name : action.payload}],
      future : [],
      canUndo : true,
      canRedo : false,
      
    }

    case "UNDO" : if(!state.canUndo) return state;
    return {
      present :past[past.length - 1], 
      past : past.slice(0,-1),
      future : [present,...future],
      canUndo : past.length > 1,
      canRede : true
    }
    case 'REDO' : return {
    
    }
    default: return state;
  }

}
function App(){
  const input = useRef();

  const initialState = {
    present : [],
    past : [],
    future : [],
    canUndo : false,
    canRedo : false,
  }

  const[items,dispatch] = useReducer(reducer,initialState);

  const addItem = (e) => {
    e.preventDefault();
    dispatch({type : 'ADD', payload : input.current.value})
    input.current.value = '';
 
  }
  return(
    <div>
      <h1>Shopping list</h1>
      <form className='add-product' onSubmit={addItem}>
        <label htmlFOR='product'>product</label>
        <input ref={input} type='text' id='product'/>
        <button type='submit'>Add</button>
      </form>

      <div className='actions'>
        <button onClick={() => dispatch({type : 'UNDO'})}>Undo</button>
        <button onClick={() => dispatch({type : 'REDO'})}>Redo</button>
      </div><ul>
        {items.present.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      
    </div>
  )
}



export default App;

大家好，我很难理解这个概念

现在：过去[past.length - 1]

所以在添加一个值之后，当我单击撤消按钮时，它应该返回一个值，但是它返回一个完整的数组，除了最后一个，如果有人解释这个概念，我将非常感激，为什么它的行为像切片法

Answer 1

如果我理解您的帖子，您会问为什么 past[past.length - 1] 返回一个数组而不是单个值。

这样做的原因是因为它IS返回单个值，past 数组的最后一个元素，而这个值恰好也是一个数组.换句话说，您的状态，即present 是一个值数组，您正在维护“撤消”和“重做”堆栈。当一个新项目被添加到present 数组中时，之前的present 数组被添加（PUSHED）到past 撤消堆栈中。当您撤消此操作时，您将从 past 撤消堆栈中删除最后一项 (POPPED) 并替换当前的 present 数组。

例子：

初始状态：

past: []
present: []
future: []

ADD 1：现在被推到过去（[].push([]) -> [[]]），1被推到现在（[].push(1) -> [1]）

past: [[]]
present: [1]
future: []

添加 2：现在被推到过去 ([[]].push([1]) -> [[], [1]])，2 被推到现在 ([1].push(2) -> [1, 2])

past: [[], [1]]
present: [1, 2]
future: []

UNDO：现在被推入未来 ([].push([1, 2]) -> [[1, 2]])，过去被弹出 ([[], [1]].pop() -> [[]]) 并设置为现在 ([1])

past: [[]]
present: [1]
future: [[1, 2]]

添加 3：现在被推到过去 ([[]].push([1]) -> [[], [1]])，3 被推到现在 ([1].push(3) -> [1, 3])，未来被清除 ([])

past: [[], [1]]
present: [1, 3]
future: []

添加 4：现在被推到过去 ([[], [1]].push([1, 3]) -> [[], [1], [1, 3]])，4 被推到现在 ([1, 3].push(4) -> [1, 3, 4])

past: [[], [1], [1, 3]]
present: [1, 3, 4]
future: []

请注意，past 或 future 数组 (stacks) 中的任何元素条目都是一个数组。