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);
}
かいてあります？かいてね。
ここらへん。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用に置き換えてね