[英]How to get previous state value in reactjs
当我点击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>
)
}
}
感谢您的帮助,希望我很清楚。
创建一个额外的状态值,如 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
我建议按如下方式使用新状态:-
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}
</>
)
像这样的事情将解决这个问题。
谢谢
我只会在状态中存储以前的数字,这将是最简单和最常见的方法。
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.