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

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

ただいまの
回答率

90.13%

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

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 844
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

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

actions/user.js

import Dispatcher from '../dispatcher'
import request from 'superagent'

export default {
  loadUsers() {
    return new Promise((resolve, reject) => {
      request
      .get('http://localhost:3000/api/users/')
      .end((err, res) => {
        if (!err && res.ok) {
          const json = JSON.parse(res.text)
          Dispatcher.handleServerAction({
            type: 'loadUsers',
            json: json,
          })
          resolve(json)
        } else {
          reject(res)
        }
      })
    })
  },
  loadSearchUsers() {
    return new Promise((resolve, reject) => {
      request
      .get('http://localhost:3000/api/users/search')
      .end((err, res) => {
        if (!err && res.ok) {
          const json = JSON.parse(res.text)
          Dispatcher.handleServerAction({
            type: 'loadSearchUsers',
            json: json,
          })
          resolve(json)
        } else {
          reject(res)
        }
      })
    })
  },
}
stores/user.js

import Dispatcher from '../dispatcher'
import BaseStore from '../base/store'

class UserStore extends BaseStore {

  getUsers() {
    if (!this.get('usersList')) this.setUsers([])
    return this.get('usersList')
  }
  setUsers(array) {
    this.set('usersList', array)
  }
}

const User = new UserStore()

User.dispatcherToken = Dispatcher.register(payload => {
  const action = payload.action
  switch (action.type) {
    case 'loadUsers':
      User.setUsers(action.json)
      User.emitChange()
      break

    case 'loadSearchUsers':
      User.setUsers(action.json)
      User.emitChange()
      break
    default:
  }
})
window.User = User
export default User
components/users/userList.js

import React from 'react'
import _ from 'lodash'
import UserStore from '../../stores/user'
// import Utils from '../../utils'

export default class UserList extends React.Component {
  static get propTypes() {
    return {
      searchString: React.PropTypes.string,
    }
  }

  constructor(props) {
    super(props)
    this.state = this.initialState
  }

  get initialState() {
    return this.getStateFromStore()
  }

  getStateFromStore() {
    return {user: UserStore.getUsers()}
  }

  componentDidMount() {
    UserStore.onChange(this.onStoreChange.bind(this))
  }

  componentWillUnmount() {
    UserStore.offChange(this.onStoreChange.bind(this))
  }

  onStoreChange() {
    this.setState(this.getStateFromStore())
  }

  render() {
    const {user} = this.state
    const {searchString} = this.props

    let allUsers = user
    const searchUser = searchString.trim().toLowerCase()

    if (searchUser.lenght > 0) {
      allUsers = _.filter(allUsers, (user) => {
        return user.name.toLowerCase().match(searchUser)
      })
    }
    return (
      <ul className='search_list'>
        {
          _.map(allUsers, (user) => {
            return (
              <div key={user.id}>
                <li>
                  <form action='/' method='get'>
                  <input name='user_id' key={user.id} type='hidden' />
                  <input type='submit' value={user.name} />
                  </form>
                </li>
              </div>
            )
          })
        }
      </ul>
    )
  }
}
components/users/search.js

import React from 'react'
import UserList from './userList'

export default class Search extends React.Component {
  constructor(props) {
    super(props)
    this.state = this.initialState
  }

  get initialState() {
    return {
      searchString: '',
    }
  }
  handleChange(e) {
    this.setState({
      searchString: e.target.value,
    })
  }
  render() {
    const {searchString} = this.state
    return (
      <div className='form-wrapper'>
        <h2>Search Users</h2>
        <div className='form-item'>
          <input type='text'
                 value={searchString}
                 onChange={this.handleChange.bind(this)}
          />
         <UserList {...this.state} />
       </div>
      </div>
   )
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • NatsumiOki

    2016/08/18 10:31

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

    キャンセル

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

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

  • ただいまの回答率 90.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る