React×ES6×JSXつかってたら怒られたError/Warning集(2016/7/3)

React×ES6×JSXつかってたら怒られたError・Warning集(2016/7/3)
日々[自分](http://kenjimorita.jp/)が怒られたら更新されていきます。

※下の「やること」はあくまで参考程度にお願いします。そこら辺が怪しいぐらいに置き換えて頂けたら

今今ここの辺。
・Uncaught SyntaxError: embedded: Unterminated JSX contents
・Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
・Uncaught TypeError: Cannot read property 'string' of undefined
・Uncaught TypeError: Cannot read property 'number' of undefined
・Uncaught TypeError: Cannot read property 'setState' of undefined
・Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `[yourComponentName]`. See 
・Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
・Uncaught TypeError: Super expression must either be null or a function, not undefined
・Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by `t`.

・Error : Cannot find module '[componentName]' from '{yourPath}'/component'
・Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.


・ If you meant to render a collection of children, use an array instead or wrap the object using createFragment(同じのあったらごめんなさい)

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

・Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Comment`. See https://fb.me/react-warning-keys for more information.


## Uncaught SyntaxError: embedded: Unterminated JSX contents

```js
  ReactDOM.render(<MixinGetProps> , document.getElementById('container'));
```
**やること**
カスタムcomponentの閉じタグ

```js
  ReactDOM.render(<MixinGetProps /> , document.getElementById('container'));

```

## Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

setStateは既にマウントされているかマウントしているコンポーネントだけ使うことができる
大抵はアンマウントしていないコンポーネントに対してsetStateしている。

**やること**

this.setStateを書くライフサイクルメソッドを再検討してください

わかりやすいライフサイクルメソッドの図
[http://qiita.com/kawachi/items/092bfc281f88e3a6e456](http://qiita.com/kawachi/items/092bfc281f88e3a6e456)
## Uncaught TypeError: Cannot read property '(string | number)' of undefined
いろいろ調べたらバージョンやプラグインやらで同じエラーでもいろいろあるみたい。
疑う箇所は
・reactのバージョンが0.13でpropTypesでプロパティに型つけしていますか？？
・babelのプラグイン
・書き方
or
リターンの中、なにかおかしくないですか？？

前者の場合
それは0.14からstaticとしてclass内で使えるみたいです
[http://mae.chab.in/archives/2758](http://mae.chab.in/archives/2758)
[https://babeljs.io/blog/2015/06/07/react-on-es6-plus](https://babeljs.io/blog/2015/06/07/react-on-es6-plus)

もしくはbabelのプラグイン問題
[http://babeljs.io/docs/plugins/transform-class-properties/](http://babeljs.io/docs/plugins/transform-class-properties/)

これの方法は未だ分かりません。babelを6以上にしてプラグインそｒ


```js
//ES6Classlike
//x
render (){
 return (
   {if(){
     some
    }
   }
 )
}

//o
render (){
   {if(){
     //some
     return some
    }
   }
 return (
 )
}
```

**やること**
前者の場合
package jsonのreactのばーじょんを0.14以降にして

```
npm install react
```

後者の場合
returnの中で処理されている箇所確認



# Uncaught TypeError: Cannot read property 'setState' of undefined

**やること**
this.setStateを呼ぶメソッドをコンストラクタ内でbindする。もしくは呼び出しがわ、もしくは「@autobind」デコレーター使う、もしくはFunctionBindSyntax

```js
//e.g
constructor(props) {
    super(props);
    this.state = {
        count : 2
    };
    this._getCount= this._getCount.bind(this);
}
_getCount () {
 this.setState({
  count : count++
 });
}

もしくは呼び出す側で
<button onClick={this._getCount.bind(this)}>
```

・なぜコンストラクタ内でbindしないといけないのか。

・reactが提供していないmethodはautoBindされていないので手動で設定する必要がある
[https://github.com/goatslacker/alt/issues/283](https://github.com/goatslacker/alt/issues/283)

・Document Bindについて
[https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding)

・React Componentでthisがundefinedになる問題の解決策
[http://c16e.com/1507060541/](http://c16e.com/1507060541/)

・Function.bind (そもそもbindが分からないかたへ)
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)


## Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `[yourComponentName]`. See 

警告：配列やイテレータでそれぞれの子は、ユニークな"キー"小道具を持っている必要があります。yourComponentNameのレンダリング方法を確認してください。
[http://facebook.github.io/react/docs/multiple-components.html#dynamic-children](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)

このstateは、子コンポーネントが（検索結果のように）の周りにシャッフルされた際やリストの先頭に追加された場合など、複雑になります。
新しいコンポーネントが（流れのように）。
それぞれの子のidとsateは全体の維持レンダーパスしなければならないこれらのケースでは、独自にそれにキーを割り当てることにより、それぞれの子コンポーネントを識別することができます。

Reactはkey付き子供を両立する場合は、keyを持つすべての子が（代わりに上書きさの）並べ替えまたは（代わりに再利用の）破壊されることを保証します。

keyは、常に直接配列内のコンポーネントに供給する必要があります。配列の子コンポーネントの要素にではなく

Warning出たコード

```js
    var data = [
      {id : 1, author: "morita"},
      {id : 2, author: "kenji"}
    ];
    var Member = React.createClass({
      render: function(){
        return (
          <div className="member">
            <h2 className="memberAuthor">
              { this.props.author }
            </h2>
          </div>
        )
      }
    });
    var MemberList = React.createClass({
      render: function(){
        var memberNodes = this.props.data.map(function(member){
          return (
            <Member author={ member.author }></Member>
//ここのauthorの渡し方が悪いみたい。
          );
        });
        return (
          <div className="memberList">
            { memberNodes }
          </div>
        )
      }
    });
```

**やること**

下記のように構造も含め変えてみたらOKだった

```js
var data = [
  {id : 1, author: "morita"},
  {id : 2, author: "kenji"}
];
var Member = React.createClass({
  render: function(){
    return (
      <li>{this.props.data.author }</li>
    )
  }
});
var MemberList = React.createClass({
  render: function(){
    return (
      <div className="memberList">
      {
        this.props.data.map(function(member){
        return  <Member key={ member.id } data={ member } />
        })
      }
      </div>
    )
  }
});
```





## Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

```js
    ReactDOM.render(
      <MemberBox data={ data } />, document.querySelector('container')
    );
```

**やること**

セレクタ指定になっていませんか?こうしよう

```js
    ReactDOM.render(
      <MemberBox data={ data } />, document.querySelector('#container')
    );
```


# Uncaught TypeError: Super expression must either be null or a function, not undefined

やること

```
constructor{
super(props);
}
```
かいてあります？かいてね。

あと[Uncaught TypeError: Super expression must either be null or a function, not undefined in _prelude.js:1 SOLVED: component must be Component](Uncaught TypeError: Super expression must either be null or a function, not undefined in _prelude.js:1 SOLVED: component must be Component)

ここらへん。componentはComponentと書いて


# Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by `t`.

```js
this.setState({
   myText: this.refs.getDOMNode().value
});
```
だとしたら

**やること**

```js
this.setState({
   myText: this.refs.inputText.value
});
```
[参照](https://github.com/mpowaga/react-slider/issues/51)

# Error : Cannot find module '[componentName]' from '{yourPath}'/component'

やること 

```
import CountComponent from './component/CountComponent'
```
こういうところのexport側とimport側の読み込みがうまくいっていないので調べてね


# Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

やること

[ここ](http://stackoverflow.com/questions/25922667/how-can-i-tell-whether-reactjs-is-in-development-mode-from-javascript)とか見たのだけれど結局原因は違うところでした。

自分の場合

```js
//これを
const tab = document.getElementById('r-tabContener');
if (tab !== null) {
    React.render( <TabComponent />);
}

//こう↓
const tab = document.getElementById('r-tabContener');
if (tab !== null) {
    React.render( <TabComponent />, tab);
}

```
つまりrenderの引数にトリガーを渡すことを忘れていたのです。


# Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Comment`. See https://fb.me/react-warning-keys for more information.

やること

下記のような記述ありませんか？？
Array要素にDOMが入っているような(this.props.(rightChildren | leftChildren)は親から渡ってきたDOMが入っている想定です、this.propTypes.node)

```js
 render(){
    let children;
    if (this.state.swapped) {
      children = [this.props.rightChildren, this.props.leftChildren];
    } else {
      children = [this.props.leftChildren, this.props.rightChildren];
    }
```

これを
addonsのcreateFragmentを使ってkeyを割り当てましょう
・addonのバージョンとreactは同じバージョン指定

```js
import createFragment from 'react-addons-create-fragment';
//some
  render(){
    let keyedChildren;
    if (this.state.swapped) {
      keyedChildren = createFragment({
        right: this.props.rightChildren,
        left: this.props.leftChildren
      });} else {
        keyedChildren = createFragment({
          left: this.props.leftChildren,
          right: this.props.rightChildren
        });
      };
```

#  If you meant to render a collection of children, use an array instead or wrap the object using createFragment

map処理する際に<li onclick={this.onClick} key={item}>適当。このようにlistとして返す際によく怒られる。

[ここ](https://github.com/facebook/react/issues/5168)

eventとkeyとしてbind(event, item)と渡していたら注意みたい。
逆にして渡して受け取れっていっている

```js

onClick={this.onClick.bind(event, item)}
//を
onClick={this.onClick.bind(item, event)}

```

# Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

**やること**
あなたの読み込んでいるreact.jsは圧縮されていませんか??
もしlib/reactとしてnode_modulesと別で読み込んでいるならproduction build用に置き換えてね