Javascript 反应-最好的方法来增加计数器时，按钮是增加和渲染结果在另一页？

我是React和Javascript领域的新手，试图通过制作一个神奇的8球应用程序来投入开发

我已经设置了两个页面：

魔术8球赛页面

一个统计页面，显示有关魔法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.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]);

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;

stats.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.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]);

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;

类StatsPage扩展组件{
render（）{
返回(
游戏统计
计数：

{`
h1{
字体系列：“Arial”；
字体大小：50px；
}`}
)
}
}
导出默认状态页面；

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

还有-如果有人有任何改进意见，请分享

---

感谢您的时间。

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

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

用我上面描述的一个非常简单的例子

---

作为旁注，我看到您使用

action

属性处理表单提交。这将导致页面刷新，这可能不是您想要的。处理此问题的一种方法是使用

的

onSubmit

属性。请参阅。

关于onSubmit，我在这里说的对吗？这似乎不像action属性那样发布。onSubmit函数：

handleSubmit（event）{console.log（'RECEIVED'）；event.preventDefault（）；fetch（'/'，{method:'POST'}）}

Form:

检查了该示例-处理两个单独的文件时使用{props.count}的情况是否相同？i、 e.两个不同的类，而不仅仅是组件？您的onSubmit是正确的。我会查看开发人员工具中的“网络”选项卡，查看请求返回的内容，以确保请求符合您的期望。您需要使用承诺的

。然后

部分来捕获获取返回的结果<代码>获取（'/'，{method:'POST'}）。然后（response=>console.log（response））传递状态的方法对于两个类组件也是相同的是。