reactjs - ReactJS：增量计数器不断刷新组件

Question

所以最近我开始了一个有趣的项目来玩弄 NextJS。

我遇到了关于计数状态的问题：

//Core
import React, { useState, useEffect } from 'react';

//Style
import styles from './form.module.scss';

export default function Form({ placeholder }) {
  const [count, setCounter] = useState(0);

  return (
    <form>
      <input
        type='text'
        placeholder={placeholder}
        className={styles.error}
      ></input>
      <button onClick={() => setCounter(count + 1)}>{count}</button>
    </form>
  );
}

每次单击增量按钮时，这都会不断刷新我的计数状态。在不重新渲染组件的情况下进行点击增量的正确方法是什么？

我在网上找到了这样的例子： https ://codesandbox.io/s/react-hooks-counter-demo-kevxp?file=/src/index.js:460-465

为什么我的计数器一直在重置，而他们的不是？

标签： reactjscounterincrement

Answer 1

你在一个form.

请先使用preventDefault，以免每次都提交表单。

  <button
    onClick={(e) => {
      e.preventDefault();
      setCounter(count + 1);
    }}
  >
    {count}
  </button>

在此处查看实际操作