質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

外部APIから所得してきた情報をmapメソッドで展開したい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 282
退会済みユーザー

退会済みユーザー

前提・実現したいこと

フロントをreact、サーバーをrailsで開発を行っています。
その際axiosを使ってrailsから所得した情報をmapで展開したいのですがうまくいきません。

前提条件 外部APIとしてはNews API(https://newsapi.org/)とrails apiモードの二箇所から情報を所得しています。問題になっているのはrailsからの情報所得の方でうまく行っていません。(memosの方です)。

発生している問題・エラーメッセージ

Main.js

import React, { useContext } from "react";
import Kizi from "./Kizi";
import AppContext from "../../context/AppContext";
import Side from './Side.js'


const Main = () => {
  const { article,memos } = useContext(AppContext);

  const item = article.map((art, index) => {

    return (
      <Kizi

        title={art.title}
        image={art.urlToImage}
        body={art.description}
        key={index}

      />
    );
  });






  const rail = memos.data.map((memo,index) =>{
    return (
      <Side 
      title={memo.title}
      image={memo.image}
      body={memo.body}
      memo={memo.memo}
      key={index}
      />
    )
  })

  return (
    <div className="main">
      {/* サイドーーーー   railsからお気に入り記事データの所得をする*/}
      <div className="said">
        {rail}

      </div>
      {/* ------------メインコンテンツーーーー */}
      <div className="content">{item}</div>
{/* ================右の箱=============== */}
      <div className="right">
        <div className="right__box">
          <img
            className="right-image"
            src="https://picsum.photos/id/237/200/300"
          ></img>
          <div className="right-content">
            自分も含め多数の人がメモしたランキングが流れる
          </div>
        </div>
      </div>
    </div>
  );
};

export default Main;


コード

APP.js

import React ,{useState,useEffect}from 'react';
import AppContext from '../context/AppContext'
import '../scss/App.scss';
import Head from './top/Header'
import Main from './top/Main'
import axios from 'axios'

function App() {

  const [article, setArticle] = useState([]);
  const [memos, setMemos] = useState([]);

  useEffect(()=>{
    news();
    rails();

  },[])


  const news = async() =>{
    const url = 'http://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=e50c1e192d364a2a8f35150d178f8df8'
    try {
      const response = await axios.get(url);
      setArticle(response.data.articles)
    } catch (error) {
      console.error(error);
    }
  }
  console.log(memos[0]);

  const rails = async()=>{
    const memourl = 'http://localhost:3001/memos'
    try {
      const respons = await axios.get(memourl);
      setMemos(respons.data.data);

    } catch (error) {
      console.error(error);
    }

    }

ここに言語を入力
コ-ド

config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'   #特定のオリジンからのリクエストを許可する

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

エラーメッセージ

TypeError: Cannot read property 'map' of undefined

試したこと

var toString = Object.prototype.toString を使って型を調べましたがうまく行っているarticleも失敗しているmemosの方もどちらの object arrayでした。

```

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。
rails 5.2.4.2 apiモード

react 
"version": "0.1.0",
"dependencies": {
"axios": "^0.19.2",
"cra-template": "1.0.3",
"node-sass": "^4.13.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

memos.data.mapのところをmemos .mapに変更したらできました。お騒がせしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る