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 ブラウザが真っ白

解決したいこと

エラーは出ないのにブラウザが真っ白になって何も表示されなくなります。

発生している問題・エラー

エラ-はなし


または、問題・エラーが起きている画像をここにドラッグアンドドロップ

### 該当するソースコード
```React

import logo from './logo.svg';
import './App.css';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <body>

        {/* <Counter></Counter> */}

        
      </body>
    </div>
  );
}

export default App;

//Counterのソースコード
import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const countup = () => {
    setCount(prevState => prevState + 1)
  }
  const countdown = () => {
    setCount(prevState => prevState - 1)
  }

  return (
    <>
      <button type="button" onChange={countup}>+</button>
      <button type="button" onChange={countdown}>-</button>
      <input>{count}</input>
    </>
  )
}

export default Counter

例)

def greet
  puts Hello World
end

自分で試したこと

Counterコンポーネントを呼び出すと画面が真っ白になります。コメントアウトしてると普通に表示されます。

分かる方がいらっしゃいましたら教えてほしいです。
よろしくお願いします。

0

4Answer

ちなみに、表示はされたのですがボタンを押しても
数字が増えたり減ったりしませんでした。

      <button type="button" onChange={countup}>+</button>

buttonはonChangeを発火できないので当たり前と言えば当たり前です.
onClickの間違いでしょう.

2Like

複数のコンポーネントを使っているのでその内容では問題の再現が難しいですね

0Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。

    ターミナルではエラーがなかったのですが、
    devtoolsの方では下記のエラーが出てました。
    errorboundaryというやつは調べてもうまくいきませんでした。
    何か解決策があるでしょうか?

    Consider adding an error boundary to your tree to customize error handling behavior.

    react-dom.development.js:2942 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
  2. 再現できる状態にしてコード再掲載は難しいでしょうか?
  3. @rempei

    Questioner

    コンポーネントを一つにしました。これで再現可能でしょうか?
  4. そのコードで動作確認されましたか?
    そのままでは動きませんでしたが少し修正して動かしました
  5. @rempei

    Questioner

    動作確認はしましたがやはり同じように真っ白になりました。
    どのようにすれば動くのでしょうか?

エラーはdevserverのログなりブラウザのDevtoolsなりに出ているはずですので確認してください.

0Like

Comments

  1. @rempei

    Questioner

    ありがとうございます。
    react devtoolsをインストールしてみたら、下記のエラーが出ましたが
    どうすればよいでしょうか?調べてみてもうまくいきませんでした。

    react_devtools_backend.js:4012 The above error occurred in the <input> component:

    at input
    at Counter (http://localhost:3000/static/js/bundle.js:328:76)
    at body
    at div
    at App

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
    overrideMethod @ react_devtools_backend.js:4012
    logCapturedError @ react-dom.development.js:18687
    update.callback @ react-dom.development.js:18720
    callCallback @ react-dom.development.js:13923
    commitUpdateQueue @ react-dom.development.js:13944
    commitLayoutEffectOnFiber @ react-dom.development.js:23391
    commitLayoutMountEffects_complete @ react-dom.development.js:24688
    commitLayoutEffects_begin @ react-dom.development.js:24674
    commitLayoutEffects @ react-dom.development.js:24612
    commitRootImpl @ react-dom.development.js:26823
    commitRoot @ react-dom.development.js:26682
    performSyncWorkOnRoot @ react-dom.development.js:26117
    flushSyncCallbacks @ react-dom.development.js:12042
    flushSync @ react-dom.development.js:26201
    scheduleRefresh @ react-dom.development.js:27795
    renderer.scheduleRefresh @ VM38 react_devtools_backend.js:6578
    (匿名) @ react-refresh-runtime.development.js:304
    performReactRefresh @ react-refresh-runtime.development.js:293
    (匿名) @ RefreshUtils.js:85
    setTimeout(非同期)
    enqueueUpdate @ RefreshUtils.js:83
    executeRuntime @ RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ @ App.js:56
    ./src/App.js @ App.js:56
    options.factory @ react refresh:6
    __webpack_require__ @ bootstrap:24
    _requireSelf @ hot module replacement:102
    apply @ jsonp chunk loading:444
    (匿名) @ hot module replacement:344
    internalApply @ hot module replacement:342
    (匿名) @ hot module replacement:279
    waitForBlockingPromises @ hot module replacement:233
    (匿名) @ hot module replacement:277
    Promise.then(非同期)
    (匿名) @ hot module replacement:276
    Promise.then(非同期)
    (匿名) @ hot module replacement:256
    Promise.then(非同期)
    hotCheck @ hot module replacement:247
    check @ dev-server.js:13
    (匿名) @ dev-server.js:68
    emit @ events.js:153
    reloadApp @ reloadApp.js:46
    ok @ index.js:209
    (匿名) @ socket.js:60
    client.onmessage @ WebSocketClient.js:50
    react-dom.development.js:2942 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
    at assertValidProps (react-dom.development.js:2942:1)
    at setInitialProperties (react-dom.development.js:9920:1)
    at finalizeInitialChildren (react-dom.development.js:10950:1)
    at completeWork (react-dom.development.js:22193:1)
    at completeUnitOfWork (react-dom.development.js:26596:1)
    at performUnitOfWork (react-dom.development.js:26568:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performSyncWorkOnRoot (react-dom.development.js:26096:1)

input は他要素を囲うタグじゃないですね
値を与えるならvalueじゃないでしょうか

<input type="text" value={count} />

ちなみに以下コードで試すとDeveloperToolでエラーが確認できましたよ


import logo from './logo.svg';
import './App.scss';

import { useState } from "react"

function Counter() {
  const [count, setCount] = useState(0)
  const countup = () => {
    setCount(prevState => prevState + 1)
  }
  const countdown = () => {
    setCount(prevState => prevState - 1)
  }

  return (
    <>
      <button type="button" onChange={countup}>+</button>
      <button type="button" onChange={countdown}>-</button>
      <input>{count}</input>
    </>
  )
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <body>

        {<Counter></Counter>}


      </body>
    </div>
  );
}

export default App;

image.png

react-dom.development.js:2942 Uncaught Error: input is a void element tag and must neither have childrennor usedangerouslySetInnerHTML.

0Like

Comments

  1. @rempei

    Questioner

    見落としてました。inputのところを直したらちゃんと表示されました。
    ありがとうございました。ちなみに、表示はされたのですがボタンを押しても
    数字が増えたり減ったりしませんでした。コードはInputのところを直した以外は
    動かしていません。setCount(prevState => prevState + 1)の次の行にconsole.log(count)を追加してみたのですが、コンソールに何も表示されませんでした。countupが動いていないのでしょうか?
  2. ボタンの状態が変わるわけではないので onChangeではなくonClickですね
  3. @rempei

    Questioner

    初歩的なミスばかりですみません...
    うまく動いてすっきりしました!
    ありがとうございました

Your answer might help someone💌