質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

4932閲覧

Uncaught TypeError: Cannot read property 'props' of null

rina_teratail

総合スコア14

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/02/28 11:22

状況

React/Reduxのアプリケーションでクリップボードにコピーするプログラムを書いているのですが、以下のようなエラーが出ます。

bundle.js:38118 Uncaught TypeError: Cannot read property 'props' of null at copyToClipboard (VM71688 bundle.js:38118)

render methodの中では問題なくpropsをとって来れているのですが、なぜかcopyToClipboardの中ではとって来れません。。どなたか理由がわかる方いますでしょうか?? m(_ _)m

コード

jsx

1import React, {Component} from 'react'; 2import {connect} from 'react-redux'; 3import Header from '../components/header'; 4import hljs from 'highlightjs'; 5import remark from 'remark'; 6import reactRenderer from 'remark-react'; 7import githubSchema from 'hast-util-sanitize/lib/github.json'; 8 9class TestDetail extends Component { 10 copyToClipboard () { 11 var textField = document.createElement('textarea') 12 const markdownString = '```js\n' + this.props.test.code + '\n```'; 13 textField.innerText = markdownString 14 document.body.appendChild(textField) 15 textField.select() 16 document.execCommand('copy') 17 textField.remove() 18 } 19 codeParser() { 20 hljs.initHighlightingOnLoad(); 21 22 const schema = Object.assign({}, githubSchema, {attributes: Object.assign({}, githubSchema.attributes, { 23 code: [ 24 ...(githubSchema.attributes.code || []), 25 'className' 26 ] 27 })}); 28 29 const markdownString = '```js\n' + this.props.test.code + '\n```'; 30 31 return (<div>{remark().use(reactRenderer, {sanitize: schema}).processSync(markdownString).contents}</div>) 32 } 33 render() { 34 const test = this.props.test; 35 36 if (!test) { 37 return ('') 38 } 39 40 return (<div className="test"> 41 <div className="test-bottom"> 42 <div className="test-source"> 43 <span onClick={this.copyToClipboard}>Copy</span> 44 </div> 45 </div> 46 </div>) 47 } 48} 49 50function mapStateToProps(state) { 51 return {tests: state.test}; 52} 53 54export default connect(mapStateToProps)(TestDetail) 55

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

thisの束縛漏れです。

Demo


https://codesandbox.io/s/v38n2oqr8l

Sample

import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.sayHi2 = this.sayHi2.bind(this); } sayHi1() { console.log('sayHi1', this) //thisがnullになってしまう } sayHi2() { console.log('sayHi2', this) //GOOD! } sayHi3 = () => { console.log('sayHi3', this); //GOOD! } render() { return ( <ul> <li><button onClick={this.sayHi1}>ButtonA</button></li> <li><button onClick={this.sayHi2}>ButtonB</button></li> <li><button onClick={this.sayHi3}>ButtonC</button></li> </ul> ) } } render(<App />, document.getElementById('root'));

投稿2018/02/28 11:40

編集2018/02/28 11:56
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rina_teratail

2018/03/01 01:39

ありがとうございます! ????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問