前提・実現したいこと
Laravel5.7でReactを利用した開発をしてみる
こちらのLaravelとReactを使った開発を元に同じようにコードを書いているのですが、Laravelのコントローラーでデータベースの値を持ってきてReactでレンダリングする処理(サイトで言う一覧機能の作成の部分)がうまくいかないです。
Laravelは5.7ではなく5.5を使っておりTodoAppとだけ表示される部分までは上手く行っております。
5.7と5.5ではレンダリングする際の書き方が変わってきたりするのでしょうか?
発生している問題・エラーメッセージ
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TodoApp`. in TodoApp
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TodoApp`.
コンソールにはこう表示されています。
該当のソースコード
React
1import React, { Component } from 'react'; 2import ReactDOM from 'react-dom'; 3 4//RenderRowsの機能実装 5function RenderRows(props) { 6 //mapでループしている(for相当) 7 return props.todos.map(todo => { 8 return ( 9 <tr key={todo.id}> 10 <td>{todo.id}</td> 11 <td>{todo.title}</td> 12 <td><button className="btn btn-secondary">完了</button></td> 13 </tr> 14 ); 15 }); 16} 17 18export default class TodoApp extends Component { 19 20 //コンストラクタ内でstateにtodosを宣言 21 constructor() { 22 super(); 23 this.state = { 24 todos: [] 25 } 26 } 27 28 //コンポーネントがマウントされた時点で初期描画用のtodosをAPIから取得 29 componentDidMount() { 30 axios 31 .get('/api/get') 32 .then((res) => { 33 //todosを更新(描画がかかる) 34 this.setState({ 35 todos: res.data 36 }); 37 }) 38 .catch(error => { 39 console.log(error) 40 }) 41 } 42 43 //テーブルの骨組みを描画し、行の描画はRenderRowsに任せる(その際、todosを渡す) 44 render() { 45 return ( 46 <React.Fragment> 47 <table className="table mt-5"> 48 <thead> 49 <tr> 50 <th>ID</th> 51 <th>タスク</th> 52 <th>完了</th> 53 </tr> 54 </thead> 55 <tbody> 56 {/* 行の描画 */} 57 <RenderRows 58 todos={this.state.todos} 59 /> 60 </tbody> 61 </table> 62 </React.Fragment> 63 ); 64 } 65} 66 67ReactDOM.render(<TodoApp />, document.getElementById('todoApp'));
blade
1<!doctype html> 2<html lang="ja"> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <!-- CSS --> 9 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 10 11 <title>react test</title> 12</head> 13 14<body> 15 <div id="app"> 16 <div class="container"> 17 <h3 class="mt-5">Todo 管理システム</h3> 18 19 <div id="todoApp"></div> 20 21 </div> 22 </div> 23 24<!-- avaScript --> 25<script src="{{ asset('js/app.js')}}"></script> 26</body> 27</html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
Laravel5.5
あなたの回答
tips
プレビュー