javascript - React - 当按钮增加并在另一个页面中呈现结果时增加计数器的最佳方法？

Question

我是 React 和 Javascript 世界的 super 新手，并试图通过制作 Magic 8 Ball 应用程序投入到一些开发工作中。

我已经设置了两个页面:

1. 神奇的 8 球游戏页面
2. 一个统计页面，用于显示有关神奇 8 球问题的信息

游戏页面功能有效(使用下面 server.js 文件中的代码段)，但我现在想将有关所问问题总数的信息从游戏页面传递到统计页面。

我的基本思路是:

• 单击按钮时，我想将计数器加 1
• 将这个计数器值存储在本地存储中并在统计页面中返回(现在只是想打印它)

我遇到过几种不同的方法，但只需要一些关于最佳方法的指导。

在实现之前，我已经整理了一些片段:

index.js 文件

<form className="question-input" method="POST" action="/">
  <input type="text" ref="inputquestion" placeholder="Ask your question..."style={{ width: "300px", fontSize:18 }}/>
  <button id="submitquestion" style={{ width: "100px", fontSize:17 }}>Shake Me!</button>
</form>

server.js 文件

  server.post('/', (req,res) => {
    console.log("Received request.")
    const answers = [
      "It is certain.",
      "It is decidedly so.",
      "Without a doubt.",
      "Yes - definitely.",
      "You may rely on it.",
      "As I see it, yes.",
      "Most likely.",
      "Outlook good.",
      "Yes.",
      "Signs point to yes.",
      "Reply hazy, try again.",
      "Ask again later.",
      "Better not tell you now.",
      "Cannot predict now.",
      "Concentrate and ask again.",
      "Don't count on it.",
      "My reply is no.",
      "My sources say no.",
      "Outlook not so good.",
      "Very doubtful."
    ]
    const number = Math.floor(Math.random()*20);
    res.status(200).send(answers[number]);

stats.js 文件

class StatsPage extends Component {
  render() {
    return (
      <main>
        <Header />
          <h1>Game Statistics</h1>
          <p> Count: </p>
          <style jsx>{`
            h1 {
              font-family:"Arial";
              font-size:50px;
            }`}
          </style>

      </main>
    )
  }
}

export default StatsPage;

我的问题是:每次在 index.js 文件中按下按钮(即提出问题)时，如何在 stats.js 中呈现一个计数器变量？我是否应该使用 saveToLocalStorage 来确保计数器保持保存状态并且不会在每次刷新应用程序时恢复为零？

此外 - 如果有人有任何改进意见，请分享!

感谢您的宝贵时间。

Answer 1

如果您不熟悉 React 和 JavaScript，最好为此使用 localStorage。这是该问题最简单的解决方案，并且是阻止您的应用程序状态在您刷新浏览器时消失的好方法。

像这样需要跨页面共享的状态可以保存在包装两个页面组件的父组件中。然后父组件可以将状态作为 props 传递给子组件。此父组件还可以在安装时尝试从 localStorage 加载其初始状态(请参阅 componentDidMount )，并处理将状态写入 localStorage。

Here's a jsfiddle用我上面描述的一个非常简单的例子。

作为旁注，我看到您使用 action 处理您的表单提交属性。这将导致您的页面刷新，这可能不是您想要的。 React 的处理方式是使用 onSubmit <form>的 Prop .查看examples in the React docs .