如何在reactjs中获取先前的状态值

Posted 2023-02-22

【中文标题】如何在reactjs中获取先前的状态值

【英文标题】：How to get previous state value in reactjs

【发布时间】：2019-09-30 20:35:35

【问题描述】：

当我点击 New Number 按钮 时，我会得到一个从 0 到 15 的随机数...这很好用，但现在我想要点击 Previous Number 按钮 ，它给了我以前的数字/状态。

例如..

渲染运行后我得到 12。然后我点击 New Number 按钮 给我 4，现在我想要当我点击 Previous Number 这改变状态和给我之前状态的数字，是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>
      )
   

感谢您的帮助，希望我清楚。

【问题讨论】：

只需在状态中存储一个previousNum，并在获得新值时将其更新为以前的值。

Basit，刚刚给你写了一个答案，让我知道这是否适合你；。

【参考方案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

【参考方案2】：

我只是将之前的数字存储在状态中，这是最简单和最常用的方法。

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>
      );
   

【参考方案3】：

我会使用 Redux 使状态更改更可预测且更易于操作。 取自文档上的 this 示例。

基本上，您的状态将如下所示：

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

然后您使用reducers 来移动这些值。

这样你只需要打电话给dispatch 告诉它'undo' 或'redo' 而不是每次你需要时间旅行时移动值。

Redux 真的很棒！

【参考方案4】：

我建议如下使用新状态：-

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
</>

)

这样的事情会解决这个问题。

谢谢