ReactJs：listenAndPromiseは関数ではありません

Question

私のプロジェクトファイル構造

App.jsx

import React, { Component } from 'react'; 
import createBrowserHistory from 'history/lib/createBrowserHistory'; 
import { Router, Route ,browserHistory} from 'react-router'; 
import Header from './components/header'; 
import PreLoginHeader from './components/pre_login_header'; 
import BrandManagerForm from './components/brand_manager_form'; 
import Home from './pages/home'; 
import Internships from './pages/internships'; 
import PostNewInternship from './pages/post_new_internship'; 
import Applications from './pages/applications'; 
import Support from './pages/support'; 

require('./util/config-reflux')(); 

class App extends Component { 
    componentDidMount(){ 

    } 
    render() { 
     const history = new createBrowserHistory(); 
     return (
      <div style={{height:'100%',width:'100%'}}> 
       { 
        this.checkLoggedIn() ? <Header history={history} /> : <PreLoginHeader /> 
       } 
       <Router history={history}> 
        <Route path='/' component={Home} /> 
        <Route path='/internships' component={Internships} /> 
        <Route path='/register' component={BrandManagerForm} /> 
        <Route path='/register/complete' component={BrandManagerForm} /> 
        <Route path='/post-new-internship' component={PostNewInternship} /> 
        <Route path='/applications' component={Applications} /> 
        <Route path='/messages' component={Internships} /> 
        <Route path='/messages/:id' component={Support} /> 
        <Route path='/messages/:id/edit' component={PostNewInternship} /> 
        {/* IT'S THE SAME VIEW AS Internships.NOT TO BE CONFUSED WITH NAME*/} 
       </Router> 
      </div> 
     ) 
    } 
    checkLoggedIn =() => { 
     if (localStorage.getItem('loggedIn')) 
      return true 
     return false 
    } 
} 
export default App; 

設定-reflux.jsx

var Reflux = require('reflux'); 
var RefluxPromise = require('reflux-promise'); 

module.exports = function() { 
    // Uses the user agent's Promise implementation 
    Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap 
}; 

Support.jsx

/* eslint-disable */ 
import React,{Component} from 'react' 
import '../assets/styles/support.css' 
import request from 'request' 
import Breadcrumb from 'react-breadcrumb' 
import moment from 'moment' 
import Loader from '../components/loader' 
import supportAction from '../actions/supportAction' 

class Support extends Component { 
    constructor(props){ 
     super(props) 
     this.base_url = process.env.REACT_APP_API_URL; 
     this.state = { 
      message : '', 
      messages:[] 
     } 
    } 
    componentDidMount(){ 
     if (!this.checkLoggedIn()){ 
      window.location = '/' 
     } 
     const that = this; 
     var buffer_id = this.props.params.id; 
     this.setState({buffer_id:buffer_id},function(){ 
      this.fetchData() 
     }) 
     var data = null 
     request.get({ 
      url:`${this.base_url}/internshipbuffer/${buffer_id}`, 
      headers:{ 
       'Authorization':`Bearer ${localStorage.getItem('auth-token')}` 
      } 
     },function(err,resp,body){ 
      data = JSON.parse(body) 

      data.benefits = data.benefits.split('\n') 
      that.setState({data:data}) 
     }) 

    } 
    updateData = (result) => { 
     console.log(result) 
    } 
    fetchData =() => { 
     var params = { 
      'internshipbuffer':this.state.buffer_id 
     } 
     supportAction.getMessage(params).then(this.updateData) 
    } 
    getMessage = (next) => { 
     const that = this; 

     var url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}`; 
     if (next){ 
      url = `${this.base_url}/internshipbuffer/getChat?internshipbuffer=${this.state.buffer_id}&sort={"createdAt":-1}` 
     } 
     request.get({ 
      url:url, 
      headers : { 
       "Authorization":`Bearer ${localStorage.getItem('auth-token')}` 
      } 
     },function(err,resp,body){ 
      var body = JSON.parse(body) 
      console.log(body); 
      if (body){ 
       var messages = that.state.messages 
       if (next){ 
        messages = messages.concat(body.data.reverse()) 
       } 
       else{ 
        messages = body.data.reverse() 
       } 

       that.setState({messages:messages,messages_next:body.next}) 
      } 
     }) 
    }  
    render(){ 
     return (
      <div className="support-main"> 
       {this.state.data ? this.renderContent() : this.renderLoading()} 
      </div> 
     ) 
    } 
    checkLoggedIn =() => { 
     if (localStorage.getItem('loggedIn')){ 
      return true ; 
     } 
     return false; 
    } 
    renderLoading =() => { 
     return (
      <Loader /> 
     ) 
    } 
    renderContent =() => { 
     const that = this; 
     var data = this.state.data; 
     return (
      <div className="support-main-container"> 
       <Breadcrumb 
        path={ 
          [ 
           { 
            path: '/messages', 
            label: 'Messages ' 
           }, 
           { 
            path: `/pending/${this.props.params.id}`, 
            label: ` ${data.title}` 
           } 
          ] 
         } 
        separatorChar={' > '}  

       /> 
       <div className="card"> 
        <div className="img-container"> 
         <img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/> 
        </div> 
        <ul className="card-brand-info-container"> 
         <li className="bold">{localStorage.getItem('brand_name')}</li> 
         <li>Brand manager : {localStorage.getItem('brandmanager_name')}</li> 
        </ul> 
        <button onClick={this.editInternshipAction} className='support-edit-btn'>EDIT</button> 
        <div className="support-main-info"> 
         <div> <span className="bold">Title</span> : {data.title}</div> 
         <div><span className="bold"> Description</span> : {data.description}</div> 
         <div><span className="bold"> Positions</span> : {data.positions}</div> 
         <div><span className="bold">Intenship Period</span> : {data.period} </div> 
         <div> 
          <span className="bold"> Benefits </span>: 
          <ul className="benefits-list"> 
           {data.benefits[0]} 
          </ul> 
         </div> 
         <div> 
          <span className="bold"> Skills & Requirements</span> : 
          <ul className="skills-list"> 
           {data.requirements} 
          </ul> 
         </div> 
         <div> 
          <span className="bold"> City : </span> 
          <ul className="city-list"> 
           { 
            data.citiesvalid.map(function(item,i){ 
             if (i !== (data.citiesvalid.length)-1) 
              return <li key={i} >{item},</li> 
             else 
              return <li key={i} >{item}</li> 

            }) 
           } 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div className="messages-container"> 
        { 
         this.state.messages ? 
         this.state.messages.map(function(obj,i){ 
          var messenger; 
          obj.brandmanager ? messenger = localStorage.getItem('brand_name') : messenger = 'Support' 
          return (that.renderMessage(obj.message,messenger,i,obj.createdAt)) 
         }) : null 
        } 
       </div> 
       <div className="message-input-container"> 
        <input className="prefix-messenger" placeholder={`${localStorage.getItem('brand_name')} :`} /> 
        <input className="main-message" value={this.state.message} onChange={this.setMessage} />   
       </div> 
       <button onClick={this.sendMessage} className="messages-send-btn"><i style={{marginRight:'5px'}} className="fa fa-paper-plane" aria-hidden="true"></i>Send</button>     
      </div> 
     ) 
    } 
    editInternshipAction =() => { 
     this.props.router.push(this.props.location.pathname+'/edit') 
    } 
    renderMessage = (message,messenger,i,message_date) => { 
     var data = this.state.data; 
     return (
      <div key={i} className="support-message-box"> 
       <hr /> 

       <div className="img-container-message"> 
        <img alt={null} src={data.asseturl} id="support-brand-logo" width="50"/> 
       </div> 
       <div className="main"> 
        <div> 
         <span style={{color:'#c67763'}} className={`bold ${messenger}`}>{messenger}</span> 
         <span> ({moment(new Date(message_date)).format('LT')}) : {message} </span> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
    sendMessage =() => { 
     const that = this; 
     if (this.state.message){ 
      request.put({ 
       url:`${this.base_url}/internshipbuffer/putChat?internshipbuffer=${this.props.params.id}&message=${this.state.message}`, 
       headers:{ 
        "Authorization":`Bearer ${localStorage.getItem('auth-token')}` 
       } 
      },function(err,resp,body){ 
       that.setState({message:''}) 
       that.getMessage(); 
      }) 
     } 
     else{ 
      this.setState({message_error:'error',error_message:'Required'})  
     } 
     that.scrollToBottom(document.getElementsByClassName('messages-container')[0]) 
    } 
    scrollToBottom = (element) => { 
     console.log(element.scrollHeight) 
     element.scrollTop = element.scrollHeight; 
    } 
    setMessage = (e) => { 
     this.setState({message:e.target.value}) 
     if (e.target.value === ''){ 
      this.setState({message_error:'error',error_message:'Required'}) 
     } 
     else{ 
      this.setState({message_error:'',error_message:''}) 
     } 
    } 
} 

export default Support 

supportAction.jsx

import Reflux from 'reflux' 
import supportResource from '../resources/supportResource' 

var actions = Reflux.createActions({ 
    'getMessage': { 
     children: ['completed', 'failed'] 
    } 
}); 
console.log(actions) 

actions.getMessage.listenAndPromise(supportResource.getMessage); 
export default actions; 

私が反応するアプリでreflux-promiseモジュールを使用していました。 サーバーからデータを取得するリソースをフェッチするアクションを定義しました。 私は自分の行動にlistenAndPromiseを使用しました。 config-reflux.jsxファイルで約束を使用するようにアプリを設定しました。 あまりにもその表示listenAndPromise is not a function。

助けが必要ですか？ありがとう!!

Answer 1

あなたがインポートするものの順序が間違っていると思います。この機能を使用する前に、設定をインポートしてください。

import './util/config-reflux'; // <-- make sure you import it before any component or action using it 
import Support from './pages/support'; 

設定-reflux.jsx：

var Reflux = require('reflux'); 
var RefluxPromise = require('reflux-promise'); 

// Uses the user agent's Promise implementation 
Reflux.use(RefluxPromise(window.Promise)); // eslint-disable-line new-cap