rempei
@rempei

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

エラーはないのにカウンターの数値が変化しない

解決したいこと

Reactでカウンターを作っているのですが、エラーはないのにブラウザ上で数値が増減せずにずっと0のままです。なぜかわかる方いらっしゃいましたら教えてほしいです。
vscodeを使っています。create-react-appで始めました。

import './App.css';
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => {
        setCount(count + 1)
        console.log(count)
        }
        }>Up</button>
      <button onClick={() => {
        setCount(count - 1)
        console.log(count)
        }
        }>Down</button>
    </div>
  );
}

export default App;

自分で試したこと

コンソールにはちゃんと数値の変化が表示されるのですが、どうしてなのでしょうか?

0

1Answer

ライブラリ自体が上手く動いていない可能性もありますので,環境構築から実動作までの手順を詳細に記載してください.
package.jsonや(あるなら)webpack.configの設定も記載してみてください.

オンラインサンドボックスの場合,ブラウザのローカルストレージにゴミが溜まりすぎている等の理由で動かなくなる時がたまにあります.

0Like

Comments

  1. @rempei

    Questioner

    デスクトップ上に開発用のフォルダを作る
    →vscodeでそのフォルダを開く
    →ターミナルでそのフォルダに移動
    →npx create-react-app redux_demo_counterと入力しenter
    →App.jsxに上記のコードを書く
    →npm startでブラウザに表示というような手順です。


    package.jsonの内容
    --------------------------------------------------
    {
    "name": "redux_demo_counter",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
      "webpack": "^5.75.0"
    },
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
    "eslintConfig": {
    "extends": [
    "react-app",
    "react-app/jest"
    ]
    },
    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
    }
    }
    --------------------------------------------------
    webpack.configはどこにあるのでしょうか?
    ごみを捨てるにはどうすればいいですか?

Your answer might help someone💌