は矢印機能リアクト（キャッチされない例外TypeErrorを：プロパティを読み取ることができません。）

-1

はなぜ、この単純なコンポーネントの作業を行いますが、私は私が使用している場合である通常の関数は矢印機能リアクト（キャッチされない例外TypeErrorを：プロパティを読み取ることができません。）

に矢印機能を変更しない場合は、人に反応：

 function() { 
     this.setState({ 
      count: this.state.count + 1 
     }) 
     }, 1000

代わりに

 () => this.setState({ 
     count: this.state.count + 1 
     }), 1000

は

Uncaught TypeError: Cannot read property 'count' of undefined at eval (eval at transform.run (browser.js:3193), :27:29)

生成します

の作業コード：

class Counter extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {count: 0}; 
 
    } 
 

 
    componentDidMount() { 
 
    setInterval(
 
    () => this.setState({ 
 
     count: this.state.count + 1 
 
    }), 
 
     1000 
 
    ); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div>{this.state.count}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Counter />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<body> 
 
    <div id="root"></div> 
 
</body>

出典

2017-11-29 Omar

矢印機能+ this：期待していないもの – Weedoze

あなたは通常の関数を使用したい場合、あなたは以下のような機能にthisコンテキストをバインドする必要があります。矢印関数は自動的にthisのコンテキストを持ちます。そのため、明示的にバインドする必要はありません。

function() { 
    this.setState({ 
    count: this.state.count + 1 
    }) 
}.bind(this)

出典

2017-11-29 07:35:44

アロー機能この場合、あなたのclassには、結合thisのための語彙的文脈を使用しています。

通常の関数は、動的バインドをthisに取得します。
あなたは関数をリファクタリングすることができ、bindコンストラクタ内にそれをリファクタリングすることができます。

class Counter extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.setMyState = this.setMyState.bind(this); 
 
    this.state = {count: 0}; 
 
    } 
 
    
 
    setMyState(){ 
 
    this.setState({ 
 
     count: this.state.count + 1 
 
    }) 
 
    } 
 

 
    componentDidMount() { 
 
    setInterval(this.setMyState,1000); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div>{this.state.count}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Counter />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<body> 
 
    <div id="root"></div> 
 
</body>

出典

2017-11-29 07:36:14

問題はthisの結合です。矢印関数はそのクロージャーを囲むクロージャのthisを使用しています。クロージャーがないため、thisがコンポーネントです。しかし、この機能を使用しているときは、thisが関数そのものになります。

これは、関数上でbindを呼び出すことで解決できますが、通常は構文がより簡潔であるため、矢印関数を使用することをお勧めします。

出典

2017-11-29 07:36:27 Kraylog

は矢印機能リアクト（キャッチされない例外TypeErrorを：プロパティを読み取ることができません。）

答えて

関連する問題