React コンポーネント関数内で this が undefined になる原因と解決策
2024-04-02
React コンポーネント関数内で this を使用すると、TypeError: Cannot read property 'xxx' of undefined エラーが発生することがあります。これは、関数コンポーネントでは this キーワードがクラスコンポーネントとは異なる動作をするためです。
原因
関数コンポーネントでは、this キーワードはコンポーネントインスタンスではなく、現在のスコープを指します。そのため、コンポーネント内のプロパティやメソッドにアクセスしようとすると、undefined エラーが発生します。
解決策
- アロー関数を使用する
アロー関数を使用すると、this キーワードは常にコンポーネントインスタンスを指します。
const MyComponent = () => {
const handleClick = () => {
// this はコンポーネントインスタンスを指す
console.log(this.props.name);
};
return (
<button onClick={handleClick}>Click me</button>
);
};
- useState や useEffect フックを使用する
useState や useEffect フックは、コンポーネント内の状態や副作用を管理するための関数です。これらのフックは、this キーワードを使用せずに、コンポーネントのプロパティやメソッドにアクセスできます。
const MyComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
// this を使用せずに count を更新
setCount(count + 1);
};
useEffect(() => {
// this を使用せずに副作用を実行
console.log(`Count is ${count}`);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
- クラスコンポーネントを使用する
どうしても this キーワードが必要な場合は、クラスコンポーネントを使用することができます。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
// this はコンポーネントインスタンスを指す
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
補足
- 2023年11月現在、React 18ではクラスコンポーネントよりも関数コンポーネントが推奨されています。
thisキーワードを使用する場合は、その必要性について慎重に検討する必要があります。- 上記の解決策以外にも、状況に応じて別の方法がある場合があります。
const MyComponent = () => {
const handleClick = () => {
// this はコンポーネントインスタンスを指す
console.log(this.props.name);
};
return (
<button onClick={handleClick}>Click me</button>
);
};
const MyComponent = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
// this を使用せずに count を更新
setCount(count + 1);
};
useEffect(() => {
// this を使用せずに副作用を実行
console.log(`Count is ${count}`);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
// this はコンポーネントインスタンスを指す
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
bind メソッドを使用する
const MyComponent = () => {
const handleClick = () => {
// this は undefined になる
console.log(this.props.name);
};
return (
<button onClick={handleClick.bind(this)}>Click me</button>
);
};
アロー関数と bind メソッドを組み合わせる
const MyComponent = () => {
const handleClick = () => {
// this はコンポーネントインスタンスを指す
console.log(this.props.name);
};
return (
<button onClick={handleClick.bind(this)}>Click me</button>
);
};
MyComponent.prototype.handleClick = () => {
// this は MyComponent インスタンスを指す
console.log(this.props.name);
};
上記のサンプルコードは、this キーワードの使用方法を理解するための参考としてください。状況に応じて最適な方法を選択する必要があります。
React コンポーネント関数内で this を使用するその他の方法
ref を使用すると、コンポーネントインスタンスへの参照を取得できます。
const MyComponent = () => {
const ref = useRef(null);
const handleClick = () => {
// ref.current はコンポーネントインスタンスを指す
console.log(ref.current.props.name);
};
return (
<button onClick={handleClick}>Click me</button>
);
};
forwardRef を使用すると、子コンポーネントに親コンポーネントの ref を渡すことができます。
const MyComponent = ({ forwardedRef }) => {
// forwardedRef は親コンポーネントの ref を指す
console.log(forwardedRef.current.props.name);
return (
<div>
<h1>Hello</h1>
</div>
);
};
const MyForwardRef = React.forwardRef(MyComponent);
const App = () => {
const ref = useRef(null);
return (
<div>
<MyForwardRef ref={ref} />
</div>
);
};
カスタムフックを使用して、this キーワードへのアクセスを抽象化することができます。
const useThis = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
// this はコンポーネントインスタンスを指す
console.log(this.props.name);
// count を更新
setCount(count + 1);
};
return {
count,
handleClick,
};
};
const MyComponent = () => {
const { count, handleClick } = useThis();
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
javascript reactjs this
