web-dev-qa-db-ja.com

不変の違反：フックは関数コンポーネントの本体内でのみ呼び出すことができます

TL; DR：新しいreact-hooks apiを使用しようとしていますが、setStateフックを呼び出すと不変の違反エラーが発生しますが、失敗し続けます。

import React, { useState } from 'react';

// type State = {
//   heading: string;
// }

const Text = () => {
  const initialState = 'Heading'.toUpperCase();

  const [heading, setHeading] = useState(initialState);

  return (
    <header>
      <h1>
        {setHeading('Brussels')};
        {heading}
      </h1>
    </header>
  );
};

export default Text;
javascriptreactjsreact-hooks
5
intercoder

SetHeading（ "Brussel"）を呼び出すと、再レンダリングが何度も繰り返され、結果として無限ループが発生し、ヘッダーを "Heading"から "Brussels"に変更するイベントが必要になるのを防ぎます。以下のコードはあなたを助けるかもしれません

const Text = () => {
const initialState= 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialState);  
return (
 <header>
    <h1>
    {heading}
    <button onClick= {() =>{setHeading("Brussel")}}>ChangeName</button>
    </h1>
    </header>
);
};
1
jShubh