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

Question

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

我已经设置了两个页面：

神奇8球游戏页面
显示有关魔术 8 球问题信息的统计页面

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

我的基本思路是：

单击按钮时，我想将计数器增加 1
将此计数器值存储在本地存储中，并 return 在统计页面中（现在只是想打印它）

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

我在实施此之前整理的一些片段：

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 的处理方式是使用 <form> 的 onSubmit 属性。见 examples in the React docs.

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

React - Best methot to increase counter when button is increased and render result in another page?

javascript

client-server

node.js

reactjs