Question

当我单击新数字按钮时，我得到一个从0到15的随机数字...这可以正常工作，但是现在我想在单击上一个数字按钮时使用，它会告诉我以前的号码/状态。

例如。

渲染运行一次，我得到12。然后单击新数字按钮，该按钮会给我4，现在我想在单击上一个数字时更改状态并给我以前的电话号码，是4。如何实现此功能...

我知道 componendDidUpdate 具有 prevProp 和 prevState 参数，但是无法弄清楚如何在单击时调用它。这是我的代码

admin

感谢您的帮助，希望我明白。

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

我只会在状态中存储以前的号码，这将是最简单，最常见的方式。

{{1}}

Answer 3

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

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

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

然后您使用reducers来移动值。

通过这种方式，您只需要调用dispatch告诉'undo'或'redo'，而不必每次旅行时都移动值。

Redux真的很棒！

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

这样的事情可以解决这个问题。

谢谢

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

4 个答案: