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

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

新規登録して質問してみよう
ただいま回答率
85.46%
React.js

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

Q&A

解決済

2回答

15430閲覧

(React.js)mapがundefinedになります。

hitominjar

総合スコア19

React.js

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

0グッド

0クリップ

投稿2018/06/08 16:11

編集2018/06/11 08:18

前提・実現したいこと

React.jsにて、検索抽出のファンクションを作っております。
初心者なので、わからないことだらけなのですが、mapがundefinedのerrorになっており、原因がわかりません。
何かヒントか、エラーを探すアイディアがあれば教えていただきたいです。。。

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

Uncaught TypeError: Cannot read property 'map' of undefined
<button className="close-button" data-close aria-label="Close modal" type="button">

該当のソースコード

import React, { Component } from 'react'; import { render } from 'react-dom'; /* Styleguide Application */ class Search extends React.Component { constructor(props) { super(props); this.state = { textLists: props.textLists, search:"", show:false, }; this.handleClick = this.handleClick.bind(this); } handleShow(){ this.setState({ show:!this.state.show }) } handleSearch(e) { var obj = {}; obj[e.target.name] = e.target.value this.setState(obj); } handleClick() { const _keyword = document.getElementsByClassName('_keyword')[0].value; const _newTextLists = this.props.textLists.filter((textLists) => ( textLists.name.toLowerCase().indexOf(_keyword) >= 0 ).bind(this)); this.setState({ textLists:_newTextLists }); } componentDidMount() { $(document).foundation(); } render() { const {textList} = this.props; var {search} = this.state; const renderitem = (text) => ( <div className="margin-bottom-4 small-6 medium-4 large-2 columns card-wrap"> <a className="itemLink" data-open="Style-Modal"> <div className="radius bordered shadow card"> <img className="style-tmb-s" src={text.thumbnail} /> <div className="card-section"> <p>{text.name}</p> </div> </div> </a> </div> ); const render = (text) => ( <div> <div className="tabs-panel is-active" id="panel1"> <pre> <code> {text.sourceTypeA} </code> </pre> </div> <div className="tabs-panel" id="panel2"> <pre> <code> {text.sourceTypeB} </code> </pre> </div> </div> ); const renderimages = (text) => ( <div> <img src={text.image} /> </div> ); return ( <div className="wrap"> <div className="large-12.columns header"> <div className="row head-nav" id="responsive-menu"> <div className="small-7 large-7 columns search-rap"> <div className="small-12 large-12 columns" id="header"> <div className="input-group"> <input type="text" className="form-control _keyword" onChange={this.handleSearch.bind(this)} value={this.state.search} name="search" placeholder="what are you searching?" autoComplete="on" list="stylesuggest"/> <datalist id="stylesuggest"> <option value="icon"/> <option value="images"/> <option value="pager"/> <option value="pager"/> <option value="pager"/> <option value="check box"/> </datalist> <button className="btn btn-default input-group-btn" type="button" onClick={this.handleShow.bind(this)}> <i className="fi-magnifying-glass"></i> </button> </div> </div> </div> </div> </div> <div className="main-wrap"> <div className="result-wrap"> <div className="large-12.columns"> <div className="small-9 large-10 columns padding-top-3 result-wrap"> <div className="reveal row" id="Style-Modal" data-reveal> <div className="Style-Modal-inner columns small-12"> <ul className="tabs" data-tabs id="example-tabs"> <li className="tabs-title is-active"> <a href="#panel1" aria-selected="true">source A</a></li> <li className="tabs-title"><a data-tabs-target="panel2" href="#panel2">source B</a></li> </ul> <div className="tabs-content" data-tabs-content="example-tabs"> {this.props.textList.map(render)} </div> <button className="close-button" data-close aria-label="Close modal" type="button"> </button> </div> </div> <div className="row"> <div className="margin-bottom-1 small-12 medium-12 large-12 columns title-wrap"> <i className="fi-magnifying-glass"></i> <h3 className="title">Style</h3> </div> </div> <div className="row items-wrap"> {this.state.show ?this.props.textList.filter(function(t){ return(search==t.name) }) .map(renderimages)&&this.props.textList.filter(function(t){ return(search==t.name) }) .map(renderitem) :null } </div> </div> </div> </div> </div> </div> ); } } export default Search;

追加のコード

lang

1import React, { Component } from 'react'; 2//import Main from './Main'; 3import Search from './Search'; 4 5/* Styleguide Application */ 6 7class StyleguideApplication extends React.Component { 8 9 constructor(props) { 10 super(props); 11 this.state = { 12 textLists: [ 13 { thumbnail: 'images/sample1.png', name:'icon', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample1.png'}, 14 { thumbnail: 'images/sample2.png', name:'navigation', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample2.png'}, 15 { thumbnail: 'images/sample3.png', name:'images', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample3.png'}, 16 { thumbnail: 'images/sample4.png', name:'pager', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample4.png'}, 17 { thumbnail: 'images/sample5.png', name:'check box', sourceTypeA:'sourceA', sourceTypeB:'sourceB', image: 'images/sample5.png'}, 18 ] 19 }; 20 } 21 22 render() { 23 24 return ( 25 <div className="wrap"> 26 <div className="row"> 27 <Search textlist={this.state.textLists} /> 28 </div> 29 </div> 30 ); 31 } 32} 33 34export default StyleguideApplication; 35

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

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

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

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

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

guest

回答2

0

自己解決

textListの名前が、単数形になったり、小文字になったりして間違えておりました><

投稿2018/06/11 13:03

hitominjar

総合スコア19

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

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

0

こんにちは。

<Search />textList のデータを意図どおりに渡せていない可能性があります。

<Search /> を使う側がどのようになっているのかを見ないと正確なところは言えませんが、
<Search /> を使っているほうのコードで、たとえば、

javascript

1 2const dummyTextList = [ 3 { name: 'icon' }, 4 { name: 'check box' }, 5 { name: 'images' }, 6]; 7 8・・・ 9 10<Search textList={dummyTextList} /> 11

というような感じでダミーデータを渡してみて、 <Search />
意図通りの表示になるのでしたら、textList属性に渡す配列を作る
ところが、うまくいってないということになります。

ちなみに、私の手元で、create-react-app で簡単なサンプルを作って、
それにご質問のコードを Search.jsx として取り込み、
上記のようなダミーデータを textList として渡すと、Search が render され、
画面上部のテキスト入力に、たとえば icon と入れてからボタンを
クリックすると、以下のように、Style の下に icon と表示されました。

イメージ説明

上記から、冒頭に書いたように、
<Search /> に渡す textList を作るところが怪しいのでは?
と思った次第です。

以上参考になれば幸いです。

投稿2018/06/09 00:00

jun68ykt

総合スコア9058

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

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

hitominjar

2018/06/11 08:21

回答ありがとうございます。コメントをいただいた通り、どうやら、textList属性に渡す配列のところが怪しいようでした。でも、どこに原因があるのか未だわかっていません。。。 「上手く渡せていない」と言うことは、propsとstateの関係がまだ理解できてないから、その部分で間違えているのでしょうか。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問