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

当我单击“新建数字”按钮时，我会得到一个从0到15的随机数。。。这很好，但现在我想当我单击“上一个数字”按钮时，它会给我上一个数字/状态

例如

渲染运行后，我得到12。然后我点击新号码按钮，它给了我4，现在我想当我点击前一个号码时，改变状态，给我之前状态的号码，它是4。 如何实现此功能

我知道componendidipdate有prevProp和prevState参数，但不知道如何在单击时调用它。 这是我的密码

类应用程序扩展了React.Component{
状态={
随机数：“”
}
componentDidMount（）{
this.getNewRandomNum（）
}
getNewRandomNum=（）=>{
让randomNum=Math.floor（Math.random（）*15）
this.setState（{randomNum}）
console.log（this.state.randomNum）
}
prevNum=（）=>{
}
render（）{
返回(
{this.state.randomNum}
新号码
以前的号码
)
}
}

---

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

创建一个类似previousNum的附加状态值，并在调用getRandomNum时使用PreviousState更新该值

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

类应用程序扩展了React.Component{
状态={
随机数：“”，
previousNum:“
};
componentDidMount（）{
这是getNewRandomNum（）；
}
getNewRandomNum=（）=>{
让randomNum=Math.floor（Math.random（）*15）；
这是我的国家(
prevState=>{
返回{
randomNum:randomNum，
previousNum:prevState.randomNum
};
},
（）=>console.log（this.state）
);
};
getPreviousNum=（）=>{
这是我的国家({
randomNum:this.state.previousNum，
previousNum:“
}，（）=>console.log（this.state））；
};
render（）{
返回(
{this.state.randomNum}
新号码
以前的号码
);
}
}

---

这里还有一个沙盒：

我只需要将之前的数字存储在状态中，这是最简单也是最常见的方法

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

类应用程序扩展了React.Component{
状态={
随机数：“”，
previousNum:'
}
componentDidMount（）{
这是getNewRandomNum（）；
}
getNewRandomNum=（）=>{
让randomNum=Math.floor（Math.random（）*15）
this.setState（（状态）=>（//这是当前状态
{ 
previousNum:state.randomNum，//这将是上一个随机数
随机数
}));
console.log（randomNum）；
}
prevNum=（）=>{
alert（this.state.previousNum）；//在此处输入所需的任何代码
}
render（）{
返回(
{this.state.randomNum}
新号码
以前的号码
);
}
}

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

基本上，你所在的州看起来是这样的：

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

你可以用它来移动这些值

这样，您只需调用

dispatch

命令它执行

'undo'

或

'redo'

，而不是每次需要进行时间旅行时都移动值

---

真是太棒了

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

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

const[prevStart，setPrevStart]=useState（1）；
const[page，setPage]=useState（1）；
常量handelPage=（getPage）=>{
如果（getPageprevStart）{
//
}
const target=`？page=${getPage}`
createBrowserHistory（）.push({
路径名：target，
});
setPrevStart（getPage）；
setPage（getPage）；
}

或者您可以使用userefhook保存以前的状态。 c

onst[name，setName]=useState（“”）；
const prevName=useRef（“”）；
useffect（（）=>{
prevName.current=名称；
}[姓名]；
返回(
{name}
{prevName.current}
)

这样的事情可以解决问题

---

谢谢

只需在状态中存储一个

previousNum

，并在获得新值时用以前的值进行更新。Basit，刚刚给您写了一个答案，请告诉我这是否适合您；。

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

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

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

)