前提・実現したいこと
ローカルの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;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/29 15:24