トップ JavaScriptに関する質問 render時にstate.mapでエラーが出てしまう

編集履歴

回答編集履歴

テキスト修正

2019/01/18 06:25

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -366,7 +366,19 @@
+コメントから頂きました、
+> hfidk　2019/01/17 18:13
+>
+余計な質問すいません，追加するタグの名前をオブジェクトのキー名にすることってできませんか？
-以下の質問と同じ要望かと思います。
+とのご質問への回答です。これは以下の質問と同じ要望かと思います。

テキスト修正

2019/01/18 06:25

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -498,7 +498,7 @@
-キーとなる文字列とコンポーネントをマップするオブジェクト `tagComponents` を作るというのが、ひと手間かかりますが、いったんルールを決めて作ってしまえば、追加していくのはそれほど大変ではありません。私自身、時々、業務でも使います。
+キーとなる文字列とコンポーネントをマップするオブジェクト `tagComponents` を作るというのが、ひと手間かかりますが、いったんルールを決めて作ってしまえば、追加していくのはそれほど大変ではありません。私自身、時々、業務でも使う小技です。

テキスト修正

2019/01/17 10:38

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -518,4 +518,4 @@
 ```
-としてまって、 `<tag />` と書いても意図したようには表示されません。
+として  `<tag />` と書いても、意図したようには表示されません。

テキスト修正

2019/01/17 10:33

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -359,3 +359,163 @@
   }
 ```
+### 追記4
+以下の質問と同じ要望かと思います。
+- stackoverflow: [Create an instance of a React class from a string](https://stackoverflow.com/questions/30172433/create-an-instance-of-a-react-class-from-a-string)
+上記への回答、
+- [https://stackoverflow.com/a/30172587/4643029](https://stackoverflow.com/a/30172587/4643029)
+にある
+> So you simply need to find a way to map between the string "Home" and the component class Home. A simple object will work as a basic registry, and you can build from there if you need more features.
+```javascript
+var components = {
+  "Home": Home,
+  "Other": OtherComponent
+};
+var Component = components[this.props.template];
+```
+を参考にすればよいです。以下簡単なサンプルです。
+３つのタグコンポーネント `FooTag`, `BarTag`, `BazTag` があります。`App` のprops `tag` に `"foo"`,`"bar"`,`"baz"` のいずれかが渡ってくる想定で、これらの文字列から表示対象のタグコンポーネントを変数 `Tag` に入れて、これをJSX形式で書いて表示するという例です。
+```jsx
+class FooTag extends React.Component {
+  render() {
+    return <span>This is a FooTag.</span>;
+  }
+}
+class BarTag extends React.Component {
+  render() {
+  	return <span>This is a BarTag.</span>;
+  }
+}
+class BazTag extends React.Component {
+  render() {
+    return <span>This is a BazTag.</span>;
+  }
+}
+const tagComponents = {
+  foo: FooTag,
+  bar: BarTag,
+  baz: BazTag,
+};
+class App extends React.Component {
+  render() {
+    const Tag = tagComponents[this.props.tag] || FooTag;
+    return (
+      <div className="app">
+        <Tag />
+      </div>
+    );
+  }
+}
+ReactDOM.render(<App tag="bar" />, document.querySelector("#app"));
+```
+- 動作確認用サンプル： [https://jsfiddle.net/jun68ykt/0zc3L7ke/7/](https://jsfiddle.net/jun68ykt/0zc3L7ke/7/)
+キーとなる文字列とコンポーネントをマップするオブジェクト `tagComponents` を作るというのが、ひと手間かかりますが、いったんルールを決めて作ってしまえば、追加していくのはそれほど大変ではありません。私自身、時々、業務でも使います。
+肝は、
+```javascript
+const Tag = tagComponents[this.props.tag] || FooTag;
+```
+と、`Tag`のような、大文字で始まる変数名に代入することです。こうすると `<Tag />` と書けますが、これを
+```javascript
+const tag = tagComponents[this.props.tag] || FooTag;
+```
+としてまって、 `<tag />` と書いても意図したようには表示されません。

テキスト修正

2019/01/17 10:11

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -282,7 +282,7 @@
-上記を以下のように修正してみるといかがでしょうか？ (こんどは`push`で大丈夫です。）
+これだと、`components_Data` に複数タグ分のデータがあったときに、setStateが複数回呼ばれてしまいます。ですので、上記を以下のように修正してみるといかがでしょうか？ (こんどは`push`で大丈夫です。）
@@ -320,7 +320,7 @@
 `this.setState({ drawnTag });`
-で、state に反映させるようにして、 `getInfo`が呼ばれたときに `setState` が1回だけ実行されるようにします。
+で、state に反映させるようにします。こうすることで`getInfo`が呼ばれたときに `setState` が1回だけ実行されるようになります。

テキスト修正

2019/01/17 02:32

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -239,3 +239,123 @@
 その上で Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、適切な値の`view`をpropsで渡すようにすればよいかと思います。逆に、表示したときにスタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。
+### 追記3
+ご質問にあるコードの以下の部分で、 `forEach` の中で setState しているのが怪しいです。
+**修正前：**
+```
+  getInfo = () =>{
+    var ref_Data = require('../users_mirror.json');
+    var components_Data = ref_Data.users[this.props.account_Name].components;
+    Object.keys(components_Data).forEach(function(key){
+      if(components_Data[key]){
+        this.setState({
+          drawnTag: this.state.drawnTag.push(<Comp />)
+        });
+      }
+    }.bind(this));
+  }
+```
+上記を以下のように修正してみるといかがでしょうか？ (こんどは`push`で大丈夫です。）
+**修正後：**
+```javascript
+  getInfo = () =>{
+    var ref_Data = require('../users_mirror.json');
+    var components_Data = ref_Data.users[this.props.account_Name].components;
+    var drawnTag = [];
+    Object.keys(components_Data).forEach(function(key){
+      if(components_Data[key]){
+        drawnTag.push(<Comp />);
+      }
+    });
+    this.setState({ drawnTag });
+  };
+```
+すなわち、 `forEach` のループに入る前に、 `drawnTag` というローカル変数で空配列の配列を用意しておき、 `forEach` のループでこの配列に `<Comp />` を追加していきます。そして、`forEach`を抜けた後に、
+`this.setState({ drawnTag });`
+で、state に反映させるようにして、 `getInfo`が呼ばれたときに `setState` が1回だけ実行されるようにします。
+上記の趣旨の修正をお手元のコードにしてみると意図通り動くかもしれません。
+それと、 `console.log(this.state.drawnTag);` というデバッグログは、以下のように render の中で行うのがよいです。一度、他の箇所にある`console.log(this.state.drawnTag);` をコメントアウトして、以下の箇所にだけ入れてみることをお勧めします。
+```javascript
+  render() {
+    console.log(this.state.drawnTag);
+    return (
+      <div>
+        {this.state.drawnTag.map((item, i) =>
+          <React.Fragment key={i}>
+            <div>{item}</div>
+          </React.Fragment>)
+        }
+      </div>
+    );
+  }
+```

テキスト修正

2019/01/17 02:15

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -144,6 +144,18 @@
+修正方法ですが、`render()` の終わりの `}` の直前に
+```javascript
+return <div>{this.state.hours}{this.state.minutes}</div>;
+```
+を追加して、 以下のようにします。
 **修正後：**
 ```jsx
@@ -218,19 +230,7 @@
-上記のように、 `render()` の終わりの `}` の直前に
-```javascript
-return <div>{this.state.hours}{this.state.minutes}</div>;
-```
-を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず`{this.state.hours}`と`{this.state.minutes}`を並べて、 classNameやstyleを指定しない単なる `<div>`で囲んだものを返すようにしておきます。
-このようにしておけば、Clock を使う側で `<Clock />` のように `view`を指定し忘れても、
+このように修正すると、`Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず`{this.state.hours}`と`{this.state.minutes}`を並べて、 classNameやstyleを指定しない単なる `<div>`で囲んだものを返すようになり、Clock を使う側で `<Clock />` のように `view`を指定し忘れても、
 `"Nothing was returned from render." `

テキスト修正

2019/01/16 05:49

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -226,12 +226,16 @@
 ```
-を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。
+を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず`{this.state.hours}`と`{this.state.minutes}`を並べて、 classNameやstyleを指定しない単なる `<div>`で囲んだものを返すようにしておきます。
-とりあえず上記のようにしておけば、Clock を使う側で `<Clock />` のように `view`を指定し忘れても、`"Nothing was returned from render." `  は出なくなると思います。
+このようにしておけば、Clock を使う側で `<Clock />` のように `view`を指定し忘れても、
+`"Nothing was returned from render." `
+は出なくなると思います。
-その上で Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、適切な値の`view`をpropsで渡すようにすればよいかと思います。スタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。
+その上で Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、適切な値の`view`をpropsで渡すようにすればよいかと思います。逆に、表示したときにスタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。

テキスト修正

2019/01/16 04:58

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -234,4 +234,4 @@
-その上で、Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、`view`をpropsで渡すようにすればよいかと思います。スタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。
+その上で Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、適切な値の`view`をpropsで渡すようにすればよいかと思います。スタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。

テキスト修正

2019/01/16 04:43

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -218,7 +218,15 @@
-上記のように、 `render()` の終わりの `}` の直前に `return <div>{this.state.hours}{this.state.minutes}</div>;` を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。
+上記のように、 `render()` の終わりの `}` の直前に
+```javascript
+return <div>{this.state.hours}{this.state.minutes}</div>;
+```
+を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。

テキスト修正

2019/01/16 04:41

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -206,19 +206,19 @@
       );
-    } else {
-      return <div>{this.state.hours}{this.state.minutes}</div>;
     }
+    return <div>{this.state.hours}{this.state.minutes}</div>;  // この行を追加
   }
 ```
-上記のように、 `else { return <div>{this.state.hours}{this.state.minutes}</div>; }` を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。
+上記のように、 `render()` の終わりの `}` の直前に `return <div>{this.state.hours}{this.state.minutes}</div>;` を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。

テキスト修正

2019/01/16 03:11

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -54,8 +54,176 @@
-### 補足
+### 追記1
 componentWillMount　は [React 16.3から非推奨メソッドになった](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path)ので、v16.3以降を使用の際は、替わりに componentDidMount を使うことをお勧めします。
+### 追記2
+`Clock` の `render` で発生している `"Nothing was returned from render." ` というエラーは、以下の修正でとりあえず発生しなくなると思います。
+**修正前：**
+```jsx
+  render() { //デジタル時計のデザインをpropsで管理できるようにした."view=''"で"vertical"で水平に"horizontal"で縦並びに
+    if (this.props.view === "horizontal") {
+      return (
+        <div
+          style={{}}
+          className="clock_flame"
+        >
+        <span id="clock_hour">
+        {this.state.hours}
+        </span>
+          <span id="clock_minute">
+        {this.state.minutes}
+        </span>
+        </div>
+      )
+    } else if (this.props.view === "vertical") {
+      return (
+        <div
+          style={{}}
+          className="clock_flame_vertical"
+        >
+          <div id="clock_hour_vertical" className="vertical">
+            {this.state.hours}
+          </div>
+          <div id="clock_minute_vertical" className="vertical">
+            {this.state.minutes}
+          </div>
+        </div>
+      );
+    }
+  }
+```
+**修正後：**
+```jsx
+  render() { //デジタル時計のデザインをpropsで管理できるようにした."view=''"で"vertical"で水平に"horizontal"で縦並びに
+    if (this.props.view === "horizontal") {
+      return (
+        <div
+          style={{}}
+          className="clock_flame"
+        >
+        <span id="clock_hour">
+        {this.state.hours}
+        </span>
+          <span id="clock_minute">
+        {this.state.minutes}
+        </span>
+        </div>
+      )
+    } else if (this.props.view === "vertical") {
+      return (
+        <div
+          style={{}}
+          className="clock_flame_vertical"
+        >
+          <div id="clock_hour_vertical" className="vertical">
+            {this.state.hours}
+          </div>
+          <div id="clock_minute_vertical" className="vertical">
+            {this.state.minutes}
+          </div>
+        </div>
+      );
+    } else {
+      return <div>{this.state.hours}{this.state.minutes}</div>;
+    }
+  }
+```
+上記のように、 `else { return <div>{this.state.hours}{this.state.minutes}</div>; }` を追加して、 `Clock` の props `view` が与えられなかったり、与えられても`horizontal`または`vertical`のいずれでもない場合に、とりあえず何もスタイルをあてないで、`{this.state.hours}`と`{this.state.minutes}`を並べて `<div>`で囲んだものを返すようにしておきます。
+とりあえず上記のようにしておけば、Clock を使う側で `<Clock />` のように `view`を指定し忘れても、`"Nothing was returned from render." `  は出なくなると思います。
+その上で、Clock を使う側では `<Clock view="horizontal" />` または `<Clock view="vertical" />` というように、`view`をpropsで渡すようにすればよいかと思います。スタイルがあたらずに時と分が表示されたら、それは `view`の値が適切にprops経由で渡せていないと気がつくことができます。

テキスト修正

2019/01/16 02:06

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -58,4 +58,4 @@
-componentWillMount　は [React 16.3から非推奨メソッドになった](https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b)ので、v16.3以降を使用の際は、替わりに componentDidMount を使うことをお勧めします。
+componentWillMount　は [React 16.3から非推奨メソッドになった](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path)ので、v16.3以降を使用の際は、替わりに componentDidMount を使うことをお勧めします。

テキスト修正

2019/01/15 02:32

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -51,3 +51,11 @@
 以上参考になれば幸いです。
+### 補足
+componentWillMount　は [React 16.3から非推奨メソッドになった](https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b)ので、v16.3以降を使用の際は、替わりに componentDidMount を使うことをお勧めします。