如何在reactjs中獲取先前的狀態值

Question

當我點擊New Number button 時，我得到一個從 0 到 15 的隨機數......這很好用，但現在我想要當我點擊Previous Number button 時，它會給我以前的數字/狀態。

例如..

渲染運行后，我得到 12。然后我單擊給我 4 的新編號按鈕，現在我想要當我單擊上一個編號時，這會更改狀態並給我之前處於狀態的編號，它是 4。如何為了實現這個功能......

我知道componendDidUpdate有prevProp和prevState參數，但無法弄清楚如何在點擊時調用它。 這是我的代碼

class App extends React.Component {
   state = {
      randomNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum()
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState({ randomNum })
      console.log(this.state.randomNum)
   }

   prevNum = () => {

   }
   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      )
   }
}

感謝您的幫助，希望我很清楚。

Answer 1

創建一個額外的狀態值，如 previousNum，並在調用 getRandomNum 時使用 prevState 更新它。

class App extends React.Component {
  state = {
    randomNum: "",
    previousNum: ""
  };

  componentDidMount() {
    this.getNewRandomNum();
  }

  getNewRandomNum = () => {
    let randomNum = Math.floor(Math.random() * 15);
    this.setState(
      prevState => {
        return {
          randomNum: randomNum,
          previousNum: prevState.randomNum
        };
      },
      () => console.log(this.state)
    );
  };

  getPreviousNum = () => {
    this.setState({
      randomNum: this.state.previousNum,
      previousNum: ""
    }, () => console.log(this.state));
  };

  render() {
    return (
      <div>
        <h1>{this.state.randomNum}</h1>
        <button onClick={this.getNewRandomNum}>New Number</button>
        <button
          onClick={this.getPreviousNum}
          disabled={typeof(this.state.previousNum) === "number" ? false : true}
        >
          Previous Number
        </button>
      </div>
    );
  }
}

這里還有沙箱： https : //codesandbox.io/s/7345kyly21

Answer 2

我會使用 Redux 使狀態更改更可預測且易於操作。 取自文檔上的此示例。

基本上，您的狀態將如下所示：

{
  counter: {
    past: [0, 1, 2],
    present: 3,
    future: [4]
  }
}

並且您使用減速器來移動值。

這樣你只需要調用dispatch告訴它'undo'或'redo'而不是每次需要時間旅行時移動值。

Redux真的很棒！

Answer 3

我建議按如下方式使用新狀態：-

const [prevStart, setPrevStart] = useState(1);
const [page, setPage] = useState(1);

const handelPage = (getPage) => {
    if (getPage < prevStart) {
        ///
    }
    if (getPage > prevStart) {
        //
    }
    const target = `?page=${getPage}`
    createBrowserHistory().push({
        pathname: target,
    });
    setPrevStart(getPage);
    setPage(getPage);
}

或者你可以使用 useRef 鈎子來保存之前的狀態。 C

onst [name, setName] = useState("");
    const prevName = useRef("");

    useEffect(() => {
prevName.current = name;
    },[name]);

return (
<>
{name}
{prevName.current}
</>

)

像這樣的事情將解決這個問題。

謝謝

Answer 4

我只會在狀態中存儲以前的數字，這將是最簡單和最常見的方法。

class App extends React.Component {
   state = {
      randomNum: '',
      previousNum: ''
   }

   componentDidMount() {
      this.getNewRandomNum();
   }

   getNewRandomNum = () => {
      let randomNum = Math.floor(Math.random() * 15)
      this.setState((state) => (  // this is the current state
        { 
          previousNum: state.randomNum, // this will be the previous randomNumber
          randomNum
       }));
       console.log(randomNum);
   }

   prevNum = () => {
     alert(this.state.previousNum); // put whatever code you need here
   }

   render() {
      return (
         <div>
            <h1>{this.state.randomNum}</h1>
            <button onClick={this.getNewRandomNum}>New Number</button>
            <button onClick={this.prevNum}>Previous Number</button>
         </div>
      );
   }
}