ご閲覧いただきまして、ありがとうございます。

こちらのページで質問させていただいた内容なのですが誤って「解決済み」にしてしまった、また問題となっている点が誤っていたことが判明したため、再度ご質問させていただきます。

下記のようなソースコードで、Itemの一覧を表示させたいと考えているのですが、コンソールではItemが表示されますが、ビューでは表示されません。

JavasScript
1class App extends Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      items: []
6    };
7  }
8
9  async componentDidMount() {
10    const items = [];
11
12    firebase
13      .firestore()
14      .collection("items")
15      .get()
16      .then(function(querySnapshot) {
17        querySnapshot.forEach(function(doc) {
18          items.push(doc.data());
19        });
20      });
21
22    this.setState({ items: items });
23  }
24
25  render() {
26    const items = this.state.items;
27    console.log("items", items);
28    return (
29      <div>
30        <div>
31          <ul>
32            {items.map(item => (
33              <li>
34                <span>{item.name}()</span>
35              </li>
36            ))}
37          </ul>
38      </div>
39    );
40  }
41}
42
43export default App;
44

itemsのコーンソール結果は下記です。

指定の仕方が誤っているのでしょうか？
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1firebase
2      .firestore()
3      .collection("items")
4      .get()
5      .then(function(querySnapshot) {
6        querySnapshot.forEach(function(doc) {
7          items.push(doc.data());
8        });
9         this.setState({ items: items });
10      });

このようにしないとstate.itemsに取得データはセットできないと思います。

追記

発展編としてPromiseの糖衣構文であるasync/awaitを活用するとより今風です。

js
1  async componentDidMount() {
2    const querySnapshot = await firebase
3      .firestore()
4      .collection("items")
5      .get()
6    
7    const items = [];
8    querySnapshot.forEach(doc => {
9      items.push(doc.data());
10    });
11
12    this.setState({ items: items });
13  }