React JSX「TypeError: x.map is not a function」エラー

Question

Javascript/React 学習中です。

index.jsxファイルのmapの行で下記エラーとなります。
「TypeError: pokemon.map is not a function」

ググって複数見てみましたが、初心者なためエラー原因が自分でわかりませんでした。
ご指摘または、確認すべき場所をアドバイス頂けますと幸いです。

index.jsxファイル

const React = require('react')

const myStyle = {
color: '#ffffff',
backgroundColor: '#000000',
};
const cap = {
  textTransform: 'capitalize',
  color: 'silver',
}

class Index extends React.Component {
  render(){
    const pokemon = this.props.Pokemon;
    return (
      <div style={myStyle}>
        <h1>See All The Pokemon!</h1>
        <ul>
          {
            pokemon.map((Pokemon, i)=>{
              return(
                <li style={cap}>
                  <a href={`/pokemon/${i}`}><font color="silver">{`${i}`} {pokemon.name}</font></a>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

module.exports = Index;

server.jsファイル

require('dotenv').config()

const express = require('express');
const app = express();
const PORT = 3000;
const Pokemon = require('./models/pokemon');


const mongoose = require('mongoose');
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false
})
mongoose.connection.once('open', () => {
  console.log('connected to mongo')
})

app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine())
//追記
app.use(express.urlencoded({ extended: true }))

app.get('/', (req, res) => {
  res.send('Welcome to the Pokemon App!')
})

/*
Indexにも追記
*/
app.get('/pokemon', (req, res) => {
  Pokemon.find({}, (err, foundPokemon)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Index', {
        Pokemon: foundPokemon
      })
    }
  })

})

/*
*/
app.get('/pokemon/new', (req, res) => {
  res.render('New')
})

app.get('/pokemon/:id', (req, res) => {
  res.render('Show', {
    pokemon: pokemon[req.params.id]
  });
})

/*
追記
*/
app.post('/pokemon', (req, res) =>{
  Pokemon.create(req.body, (err, createdPokemon ) => {
    if(err){
    res.status(404).send({
      msg: err.message
    })
  } else {
    console.log(createdPokemon);
    res.redirect('/pokemon')
  }
})
})

app.listen(PORT, () => {
  console.log('We in the building', PORT)
})

pokemon.js　ファイル

const { Schema, model } = require('mongoose');
const pokemonSchema = new Schema({
  name: { type: String, required: true, unique: true },
  img: { type: String, required: true },

});
const Pokemon = model('Pokemon', pokemonSchema);
module.exports = Pokemon;

Comments

[maisumakun]

カテゴリに「MongoDB」も追加しておいたほうがいいかと思います。

Answer 1

index.jsxで表示したい this.props.Pokemon にデータが入っていないからではないでしょうか。

貼り付けられたソースを拝見したところ、pokemon.jsに定義したMongooseのModelでデータを取得してJSXに渡そうとしていますが、server.jsではModelをそのまま渡しているだけでデータ取得の関数を呼び出していないです。
MongoDBにクエリを発行していないことになるため、this.props.Pokemonにデータが入らず表記のエラーが発生するのではないでしょうか。

Mongooseのドキュメントの以下の部分を参考にModelからMongoDBにクエリを発行してみてください。
https://mongoosejs.com/docs/api.html#model_Model.find

// async-awaitスタイルで取得
await MyModel.find({});

// callbackスタイルで条件指定して取得
MyModel.find({ name: 'john', age: { $gte: 18 }}, function (err, docs) {...});

Comments

[hiro_ike]

ご回答ありがとうございます。
新規追加しようとすると、下記エラーが帰ってきます。
"msg": "Pokemon validation failed: img: Path `img` is required., name: Path `name` is required."

mongoDBから直接クエリを追加しましたが、それも表示されませんでした。。

サンプルコードを見て追記してみましたが、誤りなどありましたらご指摘いただけますと幸いです。

[hiro_ike]

app.useの行を追加して、新規登録までできました！
回答、ありがとうございました。