Firestoreのデータの一覧表示を作りたい

firebaseのデータ一覧を表示したいのですがうまくできません。

画面起動時にエラーが出ず、
console.log(doc.data())
でtitleなどの値が取れていて、
console.log(AllHandsOn)
でPromise {<pending>}
の値が取れてます
doc.data().titleで表示しようとしたのですが、
できず

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import Divider from '@material-ui/core/Divider'
import { db } from '../../firebase/index'
const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
})
export default function ImgMediaCard() {
  const classes = useStyles()
  const AllHandsOn = db
    .collection('handsOn')
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(function (doc) {
        console.log(doc.data())
        console.log(AllHandsOn)
        // doc.data() is never undefined for query doc snapshots
      })
    })
  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {Object.title}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {AllHandsOn.url}
          </Typography>
        </CardContent>
      </CardActionArea>
      <Divider />
      <CardActions>
        <Button size="small" color="primary">
          {AllHandsOn.tag}
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  )
}

試した事

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import Divider from '@material-ui/core/Divider'
import { db } from '../../firebase/index'

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
})

export default function ImgMediaCard() {
  const classes = useStyles()

  const handsOnRef = db
    .collection('handsOn')
    .get()
    .then(function (querySnapshot) {
      querySnapshot.forEach(function (doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, ' => ', doc.data())
      })
    })

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {handsOnRef}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            a
          </Typography>
        </CardContent>
      </CardActionArea>
      <Divider />
      <CardActions>
        <Button size="small" color="primary">
          a
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  )
}

②試したこと

TypeError: doc.data is not a function

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardActionArea from '@material-ui/core/CardActionArea'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import Divider from '@material-ui/core/Divider'
import { db } from '../../firebase/index'
const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
})
class ImgMediaCard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '',
      url: '',
      tag: '',
    }
  }

  componentDidMount() {
    const doc = db.collection('handsOn').get()
    const data = doc.data()
    if (data) {
      this.setState({
        title: data.title,
        url: data.url,
        tag: data.tag,
      })
    }
  }

  render() {
    return (
      <Card>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {this.state.title}
            </Typography>
            <Typography variant="body2" color="textSecondary" component="p">
              {this.state.url}
            </Typography>
          </CardContent>
        </CardActionArea>
        <Divider />
        <CardActions>
          <Button size="small" color="primary">
            {this.state.tag}
          </Button>
          <Button size="small" color="primary">
            Learn More
          </Button>
        </CardActions>
      </Card>
    )
  }
}
export default ImgMediaCard

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

回答2件

お待たせして申し訳ございません。
こちらでいかがでしょう。

javascript
1class ImgMediaCard extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      list: []
6    };
7  }
8
9  componentDidMount() {
10    const list = [];
11    const doc = db.collection("handsOn").get()
12    .then((querySnapshot) => {
13      querySnapshot.forEach((doc) => {
14        list.push(doc.data());
15      });
16      console.log(list);
17      this.setState({ list: list });
18    })
19    .catch((error)=>{
20      console.log(`データの取得に失敗しました (${error})`);
21    });
22  }
23
24  }
25
26  render() {
27    const list = this.state.list;
28    console.log("list", list);
29    return (
30      <Card>
31        <CardActionArea>
32          <CardContent>
33          {list.map(list => (
34            <Typography gutterBottom variant="h5" component="h2">
35              {list.title}
36            </Typography>
37          ))}
38          {list.map(list => (
39            <Typography variant="body2" color="textSecondary" component="p">
40              {list.url}
41            </Typography>
42          ))}
43          </CardContent>
44        </CardActionArea>
45        <Divider />
46        {list.map(list => (
47        <CardActions>
48          <Button size="small" color="primary">
49            {list.tag}
50          </Button>
51          <Button size="small" color="primary">
52            Learn More
53          </Button>
54        </CardActions>
55      ))}
56      </Card>
57    )
58  }
59}
60export default ImgMediaCard

投稿2020/10/14 08:38

ug_o

総合スコア39

tomsuma

2020/10/17 01:13

ご回答頂き本当にありがとうございます！ Parsing error: Unexpected token {eslint render() {　　ここ const list = this.state.list; console.log("list", list); return ( <Card> このようなエラーが出てしまいます

tomsuma

2020/10/17 01:23

render の()を消しても駄目でした

ug_o

2020/10/20 05:43

} render() { 申し訳ございません。ここに一個余分なコードが入っていました。確認不足でした。 render()の直前の } を削除してください。

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

試していないので、できているか微妙ですがこんな感じはいかがでしょうか？

javascript
1import React from 'react'
2import { makeStyles } from '@material-ui/core/styles'
3import Card from '@material-ui/core/Card'
4import CardActionArea from '@material-ui/core/CardActionArea'
5import CardActions from '@material-ui/core/CardActions'
6import CardContent from '@material-ui/core/CardContent'
7import CardMedia from '@material-ui/core/CardMedia'
8import Button from '@material-ui/core/Button'
9import Typography from '@material-ui/core/Typography'
10import Divider from '@material-ui/core/Divider'
11import { db } from '../../firebase/index'
12const useStyles = makeStyles({
13  root: {
14    maxWidth: 345,
15  },
16})
17export default function ImgMediaCard() {
18  constructor(props) {
19    super(props);
20    this.state = {
21      title: "",
22      url: "",
23      tag: "",
24    };
25  }
26
27  componentDidMount(){
28    const classes = useStyles();
29    const doc = db.collection('handsOn').get();
30    const data = doc.data();
31    if(data) {
32      this.setState({
33        title: data.title,
34        url: data.url,
35        tag: data.tag,
36      });
37    }
38  }
39}
40  render() {
41    return (
42      <Card className={classes.root}>
43        <CardActionArea>
44          <CardContent>
45            <Typography gutterBottom variant="h5" component="h2">
46              {tihs.state.title}
47            </Typography>
48            <Typography variant="body2" color="textSecondary" component="p">
49              {this.state.url}
50            </Typography>
51          </CardContent>
52        </CardActionArea>
53        <Divider />
54        <CardActions>
55          <Button size="small" color="primary">
56            {this.state.tag}
57          </Button>
58          <Button size="small" color="primary">
59            Learn More
60          </Button>
61        </CardActions>
62      </Card>
63    );
64  }
65}

投稿2020/10/12 00:52

ug_o

総合スコア39

tomsuma

2020/10/12 01:24

ご回答ありがとうございます！とても丁寧な対応感動です！しかし、各所でParsing error: Unexpected token が出てしまい、これで解決かわからない状況です

ug_o

2020/10/12 01:34

失礼しました！下記に書き換えてみてください。 export default function ImgMediaCard() ↓ class ImgMediaCard extends React.Component 最終行 }の下に追加 export default ImgMediaCard; クラスコンポーネントのrender()を使用してしまったので、export default function App() {　の関数コンポーネントと混ざってしまってエラーになっていたのだと思います。

tomsuma

2020/10/12 01:48 編集

ご回答ありがとうございます！ render() {　　ここでエラー return ( <Card className={classes.root}> <CardActionArea> <CardContent> <Typography gutterBottom variant="h5" component="h2"> {this.state.title} </Typography> <Typography variant="body2" color="textSecondary" component="p"> {this.state.url} </Typography> </CardContent> </CardActionArea> <Divider /> <CardActions> <Button size="small" color="primary"> {this.state.tag} </Button> <Button size="small" color="primary"> Learn More </Button> </CardActions> </Card> ); } } のところでもParsing error: Unexpected token のエラーがあります。大変お手数ですが何故か分かるようならご教授お願いします

ug_o

2020/10/12 01:54

render()上の } が余分に多いのが原因かもしれないです… 1つ削ってみてください。

tomsuma

2020/10/13 00:36

お付き合いいただき本当にありがとうございます！！やはり駄目でした。。上記に追加しました

ug_o

2020/10/13 09:14 編集

すみません。以前の記述だとドキュメントを指定しないといけないようでした。別の方法を検討してみます。

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

あなたの回答