2019-12-01から1ヶ月間の記事一覧

redux-localstorageを使用して状態をlocalStrageに保存する

やりたいこと redux-localstorageを使用して状態をlocalStrageに保存する

Warning: Each child in a list should have a unique "key" prop. の対応

mapやforEachなどの配列を繰り返す処理でレンダリングを行う場合には、 一意のkeyを指定する必要がある。

reduxのstateから取り出した値はコンポーネントで変更してはならない

現象 ComponentAでstate.datasを使用しているとき、 ComponentBの中でstate.datasの値(または配列)を操作すると、ComponentAが正しくレンダリングされない。 対処法 Object.assignでstate.datasをコピーする。

redux - dispatchに引数を渡す

やりたいこと useDispatch()で生成したdispatchに引数を渡す

react-chartjs-2を利用してチャートを描画する

やりたいこと Reactでチャートを描画

ESLint airbnbを使用している環境下でObject.assignを使うとスプレッド構文に修正される

備忘録

Too many re-renders. React limits the number of renders to prevent an infinite loop の対応

やりたいこと エラーを消す Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. stackoverflow.com

React Redux - Hooks APIを使用してReactコンポーネントとReduxストアを接続させる

やりたいこと ReduxのHooksAPIを使用してconnect()を使用せずにReactからReduxに接続する 公式ドキュメント react-redux.js.org 下記チュートリアルのソースをベースにリファクタリングを行う www.valentinog.com

React Redux TutorialでReduxのデータフローを確認する

備忘録

React + Redux のWebアプリ開発 はじめの一歩用リンク

備忘録

React - Date型がプロパティに渡される時の型チェック

instanceOfを使用して型チェックを行う。 import React from 'react'; import PropTypes from 'prop-types'; const ComponentName = ({ props }) => { const { StartDate, EndDate } = props; }; ComponentName.PropTypes = { props: PropTypes.shape({ Star…

VSCode(version 1.41)でインテリセンス(自動補完)が効かない問題を解決する

やりたいこと VSCodeでインテリセンスが効かない問題を解決する 解決方法 VSCodeのバージョンを1.40.2に戻したら治った code -v 1.40.2 vscodeのバージョンダウンは下記を参照 参考 VSCodeをロールバック(以前のバージョンに戻)した VSCodeのLive HTML Pre…

Drag and Drop APIを試す

やりたいこと Drag and Drop APIを触る ElementをDrag and Dropで移動させたい

eslint no-nested-ternary の対応

やりたい事 eslint-config-airbnbに準拠したReactコンポーネントの実装

eslint react/prop-types の対応(プロパティがオブジェクトの場合)

やりたい事 eslint-config-airbnbに準拠したReactコンポーネントの実装 プロパティにはオブジェクトを引数として渡す

eslint react/prop-types の対応

やりたい事 eslint-config-airbnbに準拠したReactコンポーネントの実装

VSCodeでReactのプロジェクトを新規作成して、linterの設定を行う

やりたいこと vscode上でReactのプロジェクトを新規作成 linterの設定とコード補完の設定を行う ESlintの設定にはairbnbを使用 stylelintの設定はstylelint-config-standardを使用