All Articles

React 触り始め、よく遭遇する問題まとめ(個人的に)

2019/10/29

Reactの初歩的エラー集

2019 10 29 21 47 02

コンポーネントのreturnする際に、複数のタグを返してしまいエラー

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?

const HogeConponent = () => {
   // これはエラー
   return(
      <h1>タイトル</h1>
      <p>こんにちは</p>
   )
}
タグ1つとして、返却するようにして対応 ↓
const HogeConponent = () => {
   return(
      <div>
         <h1>タイトル</h1>
         <p>こんにちは</p>
      </div>
   )
}

prop の渡し方によるエラー

Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

propを直接命名して使う場合に、{} で囲まずエラー

const HogeComponent = (name) => {

   return(
      <p> {name} </p>  // ← エラーとなる。name.nameならOK.(nameがpropなので、prop.nameという扱い)
   )
}
const HogeComponent = (name) => {

の propのnameを {} で囲って対応 ↓

const HogeComponent = ({name}) => {

コンポーネントのレンダリング部分(returnの内側)で、if文書いてエラー

Parsing error: Unexpected token

表示する内容を分岐させたい場合に、if文でreturnする jsx をかき分けるときに、return内で書いちゃってエラー。

const HogeComponent = (name) => {

   return(
      if (name.length === 0) {
         <p> 名無しさんさん、ようこそ</p>
      } else {
         <p> {name}さん、ようこそ </p>
      }
   )
}

正しくは、以下のようにreturn上層でif分岐

const HogeComponent = (name) => {

   if (name.length === 0) {
      return <p> 名無しさんさん、ようこそ</p>

   } else {

      return <p> {name}さん、ようこそ </p>
   }
}

<button>の onClick属性に、useStateのセッターを指定してエラー

Too many re-renders. React limits the number of renders to prevent an infinite loop.

以下の仕組みで無限ループとなりエラー
1 初期描画時に<button>のonClickに指定したセッターが呼ばれる
->
2 セッターが呼ばれて、値が更新される。そのため、再描画処理が走る。
->
3 また、1の<button>の描画が走り、以降、無限ループ…

const [count, setCount] =  useState(0)

// 無限ループのエラー!
<button onClick={ setCount(count + 1) }>ボタン</button> 

// 対応方法 1(関数を返すように () => を使って、その場でセッター呼ぶ)
<button onClick={ () => setCount(count + 1)  }>ボタン</button>

// 対応方法 2(外部にセッター呼ぶ関数を定義して、その関数を設定する)
<button onClick={ countUpMethod }>ボタン</button>

// 対応方法 2 の関数
const countUpMethod = () => {
   setCount( count + 1 ) 
}

JavaScriptの配列操作

配列をごにょごにょ操作したいときに、一発で解決する高機能なAPIがない。。。

JavaScriptの配列操作は、forEachで回して別の配列に格納していく、ということで対処していたけど、forEach以外で、配列操作する処理や、便利な配列操作をまとめたい。

ループさせて値を加工したい → map()

const numArray = [0, 1, 2, 3]

const result = numArray.map( num => num + 10)

// ↓ result の中身
// [10, 11, 12, 13]

指定した条件に合うものを、すべて取り出す → filter()

const words = ['hoge', 'hogehoge', 'huga', 'hugahuga'];

const result = words.filter(word => word.length > 6);

// resultの中身
// ["hogehoge", "hugahuga"]

指定した要素を取得(※最初の1件だけ) → find()

該当した最初の要素しか取得できない
そのため、ユニークなIDなどで検索する用途で使うのがよさそう

const numbers = [10, 20, 30, 40, 10];

const found = numbers.find(element => element === 10);

// 先頭にある 10 のみHitして取り出されている状態。
console.log(found);
// 10

指定した要素の位置(index)を取得したい → indexOf()

 ある場合、見つかったindexの位置が返ってくる( ※0以上の値 )
ない場合、 -1 が返ってくる\

cosnt fruits = ['apple', 'banana', 'orange', 'orange', 'orange']

console.log(fruits.indexOf('apple'))
// 0

console.log(fruits.indexOf('banana'))
// 1

// 複数あった場合、最初にみつかった要素のindexだけ返却される
console.log(fruits.indexOf('orange'))
// 2


// なかった場合
console.log(fruits.indexOf('いちご'))
// -1
// ※配列に該当要素が見つからない場合は、-1を返す

指定した要素が含まれているか(※true / false を返却) → includes()

※ECMAScript 2016 (ECMA-262) 以上のversionで利用可能

cosnt fruits = ['apple', 'banana', 'orange', 'orange', 'orange']


console.log(fruits.includes('apple'))
// true

console.log(fruits.includes('いちご'));
// false

値を追加した新規配列を返却 → concat()

 useState()を使った配列を更新する際に、重宝する。
(Stateで管理している変数は直接変更できないため)
元の配列に影響はなく、値が追加されたあとの新規の配列が返ってくるので使いやすい。

const array = [ 1, 2 ]

const result = array.concat(3)

console.log(result)
// [ 1, 2, 3 ]

// arrayは元のままで、影響なし
consolo.log(array)
// [ 1, 2 ]