Object.assign＆FlexboxのためのダイナミックCSSスタイリング - codepen固有

Question

いくつかの例でプロジェクト用の小さなフレックスボックスデモをまとめています。私はObject.assignを使用して、ユーザーがドロップダウンの値を変更したときにいくつかのフレックスアイテムにスタイルを動的に追加しています。

しかし、私は小さなエラーがありますはcodepenでしか発生しません。私のコードをエディタにコピーし、クロムでローカルに実行すると問題は発生しません。

を再現する：右の列のフレックスアイテムの値を変更して、コンソールを開きます。

私はちょうどブラウザでこれを実行してcodepenを忘れることができますが、私はビルドステップを実行することなくbabelを使用することを好むし、私が間違ったことをしているかどうか、 。

'Uncaught TypeError: Cannot convert undefined or null to object' 

56行目はエラーが発生する場所です。 const flexItems = [...document.querySelectorAll('.flex-item')];：

https://codepen.io/jreynolds90/pen/mmxewW?editors=1111

Answer 1

問題は、この行のように見えます。 flexItemが[div.flex-item, div.flex-item, div.flex-item]（配列、array.styleは未定義）であることを認識すると、エラーを引き起こす行（たとえば、DevToolsのChrome DevTools）に対してブレークポイントを設定すると、その特定の瞬間にブレークポイントが設定されます。その時点でflexItems（複数形）を見ると、それは[NodeList(3)]（read：3 NodeListの配列）であることがわかるので、forEachの最初の要素は配列です。

ちょうど使用：const flexItems = document.querySelectorAll('.flex-item');とあなたのコードは正常に動作します：https://codepen.io/anon/pen/WjzQqL?editors=1111