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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

555閲覧

TypeError: Cannot read property 'map' of undefined

johnson_hungry3

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/12/28 15:41

前提・実現したいこと

ローカルのREST APIにデータを追加して取ってきてクライアント側に表示するということをしたいと思っています。
そしてthis.stateにある配列をmapメソッドを使って要素を個別に表示させたいです。

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

Uncaught TypeError: Cannot read property 'map' of undefined at App.render (App.js:95) at finishClassComponent (react-dom.development.js:15141) at updateClassComponent (react-dom.development.js:15096) at beginWork (react-dom.development.js:15980) at performUnitOfWork (react-dom.development.js:19102) at workLoop (react-dom.development.js:19143) at HTMLUnknownElement.callCallback (react-dom.development.js:147) at Object.invokeGuardedCallbackDev (react-dom.development.js:196) at invokeGuardedCallback (react-dom.development.js:250) at replayUnitOfWork (react-dom.development.js:18350) at renderRoot (react-dom.development.js:19261) at performWorkOnRoot (react-dom.development.js:20165) at performWork (react-dom.development.js:20075) at performSyncWork (react-dom.development.js:20049) at requestWork (react-dom.development.js:19904) at scheduleWork (react-dom.development.js:19711) at Object.enqueueSetState (react-dom.development.js:12936) at App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356) at App._callee$ (App.js:39) at tryCatch (runtime.js:62) at Generator.invoke [as _invoke] (runtime.js:288) at Generator.prototype.(:3001/anonymous function) [as next] (http://localhost:3001/static/js/0.chunk.js:521:21) at asyncGeneratorStep (asyncToGenerator.js:3) at _next (asyncToGenerator.js:25) render @ App.js:95 finishClassComponent @ react-dom.development.js:15141 updateClassComponent @ react-dom.development.js:15096 beginWork @ react-dom.development.js:15980 performUnitOfWork @ react-dom.development.js:19102 workLoop @ react-dom.development.js:19143 callCallback @ react-dom.development.js:147 invokeGuardedCallbackDev @ react-dom.development.js:196 invokeGuardedCallback @ react-dom.development.js:250 replayUnitOfWork @ react-dom.development.js:18350 renderRoot @ react-dom.development.js:19261 performWorkOnRoot @ react-dom.development.js:20165 performWork @ react-dom.development.js:20075 performSyncWork @ react-dom.development.js:20049 requestWork @ react-dom.development.js:19904 scheduleWork @ react-dom.development.js:19711 enqueueSetState @ react-dom.development.js:12936 push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356 _callee$ @ App.js:39 tryCatch @ runtime.js:62 invoke @ runtime.js:288 prototype.(anonymous function) @ runtime.js:114 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:25 Promise.then (async) asyncGeneratorStep @ asyncToGenerator.js:13 _next @ asyncToGenerator.js:25 (anonymous) @ asyncToGenerator.js:32 (anonymous) @ asyncToGenerator.js:21 App._this.componentWillMount @ App.js:24 callComponentWillMount @ react-dom.development.js:13172 mountClassInstance @ react-dom.development.js:13270 updateClassComponent @ react-dom.development.js:15087 beginWork @ react-dom.development.js:15980 performUnitOfWork @ react-dom.development.js:19102 workLoop @ react-dom.development.js:19143 renderRoot @ react-dom.development.js:19228 performWorkOnRoot @ react-dom.development.js:20165 performWork @ react-dom.development.js:20075 performSyncWork @ react-dom.development.js:20049 requestWork @ react-dom.development.js:19904 scheduleWork @ react-dom.development.js:19711 scheduleRootUpdate @ react-dom.development.js:20415 updateContainerAtExpirationTime @ react-dom.development.js:20441 updateContainer @ react-dom.development.js:20509 push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820 (anonymous) @ react-dom.development.js:20974 unbatchedUpdates @ react-dom.development.js:20292 legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970 render @ react-dom.development.js:21037 ./src/index.js @ index.js:7 __webpack_require__ @ bootstrap:782 fn @ bootstrap:150 0 @ serviceWorker.js:135 __webpack_require__ @ bootstrap:782 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1

該当のソースコード

Client.js

const search = async(type) => { let response = await fetch(`api/${type}`, { accept: 'application/json' }); let result = await response.text(); let letter = () => { console.log(result); } letter(); } const create = async(type, data) => { let response = await fetch(`api/${type}`, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'post', body: JSON.stringify(data) }); let result = await response.json(); return result; } const Client = {search, create}; export default Client;

App.js

import React, { Component } from 'react'; import './App.css'; import Client from './Client.js'; class App extends Component { constructor(props) { super(props) this.state = { traders: [], email: '', firstName: '', lastName: '', type: '' } this.handleTraderInputChange = this.handleTraderInputChange.bind(this) } componentWillMount = () => { this.getTrader() } handleTraderInputChange = event => { const {target: {name, value}} = event this.setState({ [name]: value }); } getTrader = async() => { let data = await Client.search('Trader') this.setState({ traders: data }) } submitTrader = () => { const data = { "$class": "org.acme.landowner.Trader", "email": "this.state.email", "firstName": "this.state.firstName", "lastName": "this.state.lastName", "type": "this.state.type" } Client.create('Trader', data) .then(() => { this.getTrader() }) } render() { return( <div className="App"> <h2>Add Trader</h2> <p>email:</p> <input onChange={this.handleTraderInputChange} type="text" name="email" /> <p>firstName:</p> <input onChange={this.handleTraderInputChange} type="text" name="firstName" /> <p>lastName:</p> <input onChange={this.handleTraderInputChange} type="text" name="lastName" /> <p>type:</p> <input onChange={this.handleTraderInputChange} type="text" name="type" /> <button onClick={this.submitTrader}>Create New Trader</button> <div style={{justifyContent: 'space-around'}}> <div> <h2>Trader List</h2> // この行でエラーがでます {this.state.traders.map((r,i) => ( <div key = {i} style={{border: '1px solid red'}}> <p>email: {r.email}</p> <p>firstName: {r.firstName}</p> <p>lastName: {r.lastName}</p> <p>type: {r.type}</p> </div> ))}; </div> <div> </div> </div> </div> ) } } export default App;

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Client.search() の戻り値が Promise<void> 型なので state.tradersundefined が代入されます。
配列を返すようにしましょう。

投稿2018/12/29 07:24

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

johnson_hungry3

2018/12/29 15:24

yhg様回答ありがとうございます! 以下のように編集すると表示されるようになりました。 Client.js ``` const search = async(type) => { let response = await fetch(`api/${type}`, { accept: 'application/json' }); let result = await response.json(); return result; } const create = async(type, data) => { let response = await fetch(`api/${type}`, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'post', body: JSON.stringify(data) }); let result = await response.json(); return result; } const Client = {search, create}; export default Client; ``` App.js ``` import React, { Component } from 'react'; import './App.css'; import Client from './Client.js'; class App extends Component { constructor() { super() this.state = { traders: [] } this.handleTraderInputChange = this.handleTraderInputChange.bind(this) } componentWillMount = () => { this.getTrader() } handleTraderInputChange = event => { const {target: {name, value}} = event this.setState({ [name]: value }); } getTrader = async() => { Client.search('Trader') .then(data => { this.setState({ traders: data }) }) } submitTrader = () => { const data = { "$class": "org.acme.landowner.Trader", "email": this.state.email, "firstName": this.state.firstName, "lastName": this.state.lastName, "type": this.state.type } Client.create('Trader', data) .then(() => { this.getTrader() }) } render() { return( <div className="App"> <h2>Add Trader</h2> <p>email:</p> <input onChange={this.handleTraderInputChange} type="text" name="email" /> <p>firstName:</p> <input onChange={this.handleTraderInputChange} type="text" name="firstName" /> <p>lastName:</p> <input onChange={this.handleTraderInputChange} type="text" name="lastName" /> <p>type:</p> <input onChange={this.handleTraderInputChange} type="text" name="type" /> <button onClick={this.submitTrader}>Create New Trader</button> <div style={{justifyContent: 'space-around'}}> <div> <h2>Trader List</h2> {this.state.traders.map((r, i) => ( <div style={{border: '1px solid black'}} key={i}> <p>email: {r.email}</p> <p>firstName: {r.firstName}</p> <p>lastName: {r.lastName}</p> <p>type: {r.type}</p> </div> ))} </div> </div> </div> ) } } export default App; ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問