Go to Qiita Advent Calendar 2024 Top
LoginSignup
101
89

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@M-ISO(kenji morita)

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

Last updated at Posted at 2016-03-05

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

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

今今ここの辺。
・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

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

やること
カスタムcomponentの閉じタグ

  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

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
https://babeljs.io/blog/2015/06/07/react-on-es6-plus

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

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

//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

//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

・Document Bindについて
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/

・Function.bind (そもそも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

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

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

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

Warning出たコード

    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だった

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.

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

やること

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

    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.

this.setState({
   myText: this.refs.getDOMNode().value
});

だとしたら

やること

this.setState({
   myText: this.refs.inputText.value
});

参照

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.

やること

こことか見たのだけれど結局原因は違うところでした。

自分の場合

//これを
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)

 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は同じバージョン指定

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処理する際に

適当。このようにlistとして返す際によく怒られる。

ここ

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


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用に置き換えてね

101
89
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
101
89

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?