📖

ReactのFunction Componentの`js-no-bind`エラーを修復

2022/08/20に公開約900字

このコードにはESLintのreact/js-no-bindに違反してます

Cart.js
function Cart() {
	function cartItemRemoveHandler(id) {
		console.log(id)
	}
	
	return <CartItem
		onRemove={cartItemRemoveHandler.bind(null, item.id)}
		// ここにエラー
        />;
}
CartItem.js
function CartItem(props) {
	return <button onClick={props.onRemove}>Remove</button>
}

なぜこう書くのか?の理由は二つあります

  • JSXのonRemove={}には、直接にFunctionをInvokeすることができません、よって、引数(item.id)をパスすることもできません
  • bindを利用して、新しいFunctionを作ります、しかも直接にInvokeはなし、引数をパスすることが可能になります

修正する方法は以下となります

まずはCart.jsのbind()部分を削除します

Cart.js
return <CartItem
-		onRemove={cartItemRemoveHandler.bind(null, item.id)}
+		onRemove={cartItemRemoveHandler}
	/>;

次はCartItem.jsに、もう一つのfunctionを書きます

CartItem.js
function CartItem(props) {
+	function onRemoveHandler() {
+		props.onRemove(props.id);
+	}

-	return <button onClick={props.onRemove}>Remove</button>
+	return <button onClick={props.onRemoveHandler}>Remove</button>
}

これで完了しました

Discussion

ログインするとコメントできます