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

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

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

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

React.js

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

Q&A

0回答

1893閲覧

Rails + React + Fluxで作成しているチャットアプリのユーザー検索機能が動かない。

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2016/08/17 06:17

###前提・実現したいこと
タイトルの通り、チャットアプリを作成しています。
チャットアプリの中で会話をする相手を探すための検索機能を作っているのですが、思った通りに動かないので質問することにしました。
検索機能の仕組みとしてはログインしているユーザー以外のJSONデータを取得し、検索ボックスの下部に全て表示させ、検索ボックスにキーワードを入力するとキーワードに応じてユーザーが絞り込まれるというものを作っています。

###発生している問題・エラーメッセージ
ログインしているユーザー以外のデータの取得はできているのですが、検索ボックスにキーワードを入力しても絞り込まれる処理が行われず全てのデータが表示されたままの状態で何も動きません。
エラーメッセージなどは特に確認できません。

Javascript

1 2actions/user.js 3 4import Dispatcher from '../dispatcher' 5import request from 'superagent' 6 7export default { 8 loadUsers() { 9 return new Promise((resolve, reject) => { 10 request 11 .get('http://localhost:3000/api/users/') 12 .end((err, res) => { 13 if (!err && res.ok) { 14 const json = JSON.parse(res.text) 15 Dispatcher.handleServerAction({ 16 type: 'loadUsers', 17 json: json, 18 }) 19 resolve(json) 20 } else { 21 reject(res) 22 } 23 }) 24 }) 25 }, 26 loadSearchUsers() { 27 return new Promise((resolve, reject) => { 28 request 29 .get('http://localhost:3000/api/users/search') 30 .end((err, res) => { 31 if (!err && res.ok) { 32 const json = JSON.parse(res.text) 33 Dispatcher.handleServerAction({ 34 type: 'loadSearchUsers', 35 json: json, 36 }) 37 resolve(json) 38 } else { 39 reject(res) 40 } 41 }) 42 }) 43 }, 44} 45

javascript

1 2stores/user.js 3 4import Dispatcher from '../dispatcher' 5import BaseStore from '../base/store' 6 7class UserStore extends BaseStore { 8 9 getUsers() { 10 if (!this.get('usersList')) this.setUsers([]) 11 return this.get('usersList') 12 } 13 setUsers(array) { 14 this.set('usersList', array) 15 } 16} 17 18const User = new UserStore() 19 20User.dispatcherToken = Dispatcher.register(payload => { 21 const action = payload.action 22 switch (action.type) { 23 case 'loadUsers': 24 User.setUsers(action.json) 25 User.emitChange() 26 break 27 28 case 'loadSearchUsers': 29 User.setUsers(action.json) 30 User.emitChange() 31 break 32 default: 33 } 34}) 35window.User = User 36export default User 37

javascript

1 2components/users/userList.js 3 4import React from 'react' 5import _ from 'lodash' 6import UserStore from '../../stores/user' 7// import Utils from '../../utils' 8 9export default class UserList extends React.Component { 10 static get propTypes() { 11 return { 12 searchString: React.PropTypes.string, 13 } 14 } 15 16 constructor(props) { 17 super(props) 18 this.state = this.initialState 19 } 20 21 get initialState() { 22 return this.getStateFromStore() 23 } 24 25 getStateFromStore() { 26 return {user: UserStore.getUsers()} 27 } 28 29 componentDidMount() { 30 UserStore.onChange(this.onStoreChange.bind(this)) 31 } 32 33 componentWillUnmount() { 34 UserStore.offChange(this.onStoreChange.bind(this)) 35 } 36 37 onStoreChange() { 38 this.setState(this.getStateFromStore()) 39 } 40 41 render() { 42 const {user} = this.state 43 const {searchString} = this.props 44 45 let allUsers = user 46 const searchUser = searchString.trim().toLowerCase() 47 48 if (searchUser.lenght > 0) { 49 allUsers = _.filter(allUsers, (user) => { 50 return user.name.toLowerCase().match(searchUser) 51 }) 52 } 53 return ( 54 <ul className='search_list'> 55 { 56 _.map(allUsers, (user) => { 57 return ( 58 <div key={user.id}> 59 <li> 60 <form action='/' method='get'> 61 <input name='user_id' key={user.id} type='hidden' /> 62 <input type='submit' value={user.name} /> 63 </form> 64 </li> 65 </div> 66 ) 67 }) 68 } 69 </ul> 70 ) 71 } 72}

javascript

1 2components/users/search.js 3 4import React from 'react' 5import UserList from './userList' 6 7export default class Search extends React.Component { 8 constructor(props) { 9 super(props) 10 this.state = this.initialState 11 } 12 13 get initialState() { 14 return { 15 searchString: '', 16 } 17 } 18 handleChange(e) { 19 this.setState({ 20 searchString: e.target.value, 21 }) 22 } 23 render() { 24 const {searchString} = this.state 25 return ( 26 <div className='form-wrapper'> 27 <h2>Search Users</h2> 28 <div className='form-item'> 29 <input type='text' 30 value={searchString} 31 onChange={this.handleChange.bind(this)} 32 /> 33 <UserList {...this.state} /> 34 </div> 35 </div> 36 ) 37 } 38} 39

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

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

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

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

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

NatsumiOki

2016/08/18 01:31

Ruby側での検索結果は正常に返ってきていて、React側で再レンダリングされない(画面に反映されないだけ)という意味でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問