ReactJS：在超级代理 ajax 请求期间显示带有加载消息的模式

Question

我在 ajax 请求（使用超级代理）期间显示带有加载消息的模式对话框时遇到问题。

我有一个 reactjs 应用程序，它有一个输入字段、一个按钮和一个模式区域。我希望它像这样工作...

用户在输入字段中插入关键字并单击按钮。
单击该按钮后，会调用 ajax 使用关键字从某个网站抓取信息。
在 ajax 调用期间，会出现一个显示加载消息的模式对话框。
一旦 ajax 调用结束，模式对话框将关闭，已抓取的信息列表将列在输入字段下。

我似乎无法让 3. 工作。

这是我的资料：我尝试放入一种方法，该方法在 ajax 调用之前和之后更改模态组件的道具，但该方法无效。

感谢任何帮助！

app.js

import React from 'react'
import ReactDOM from 'react-dom'
import PageBody from './pageBody'

ReactDOM.render(
     <PageBody />
    ,document.getElementById('root')
)

pageBody.js

import React, {Component} from 'react'
import Search from './Search'
import Modal from './modal'

export default class PageBody extends Component{
    constructor (props){
        super(props)
        this.state = {
             is_crawling: false
        }
    }

    crawlState (is_crawling) {
        this.setState({is_crawling: is_crawling})
    }

    render () {
        const show_modal = this.state.is_crawling
        this.crawlState = this.crawlState.bind(this)

        return (
            <div>
                <Search crawlState={this.crawlState}/>
                <Modal show_modal={show_modal}/>
            </div>
        )
    }
}

search.js

import React, {Component} from 'react'
import request from 'superagent'

export default class Search extends Component{
    constructor (props) {
        super(props)
        this.state = {
            keyword: ''
            ,result: []
        }
    }

    // method used to make ajax request
    crawl (){
        const keyword = this.state.keyword
        this.props.crawlState(true) // set crawlstate as true to show modal
        request // actual ajax request (superagent)
            .get('/crawl')
            .query({keyword: keyword})
            .end((err, res) => {
                if (err) console.log('superagent failed')
                const r = res.body.result
                this.setState({result: r})
            })
        this.props.crawlState(false) // set crawlstate as false to hide modal
    }

    onChangeHandler (e) {
        this.setState({keyword: e.target.value})
    }

    render () {
        const onChangeHandler = e => this.onChangeHandler(e)
        const crawl = this.crawl()
        const keyword = this.state.keyword
        const arr = this.state.result.map((e, idx) => {
            return <div key={idx}>{e}</div>
        })

        return (
            <div>
                <input type="text" onChange={onChangeHandler} value={keyword} />
                <button onClick={crawl}>CRAWL</button>
                {arr}
            </div>
        )
    }
}

modal.js

import React, {Component} from 'react'

export default class Modal extends Component{
    constructor (props) {
        super(props)
        this.state = {
            show: false
        }
    }

    componentWillReceiveProps(nextProps){
        const show_modal = nextProps.show_modal
        this.setState({show: show_modal})
    }

    render () {
       if (this.state.show){
            return <div id="modal"></div>
        } else {
            return null
        }
    }
}

Answer 1

在 pageBody.js 组件中，你应该在构造函数中绑定 crawlState() 函数而不是在渲染器中，或者你可以使用像 crawlState = () => {}

这样的箭头函数

在 search.js 组件中，在 onClick 函数上使用 this.crawl 而不是创建新的 const 变量。

您应该绑定 crawl 函数以在函数内部使用 this 并且您在同一级别调用了 this.props crawlState() 且没有任何条件，这意味着您调用了 setState()同时两次你不应该这样做，所以你应该在请求完成后在 end 中调用 this.props crawlState(false)。

pageBody.js

import React, {Component} from 'react'
import Search from './Search'
import Modal from './modal'

export default class PageBody extends Component{
  constructor (props){
    super(props)
    this.state = {
      is_crawling: false
    }
    this.crawlState = this.crawlState.bind(this)

  }

  crawlState (is_crawling) {
    this.setState({is_crawling: is_crawling})
  }

  render () {
    const show_modal = this.state.is_crawling;

    return (
        <div>
          <Search crawlState={this.crawlState}/>
          <Modal show_modal={show_modal}/>
        </div>
    )
  }
}

search.js

import React, {Component} from 'react'
import request from 'superagent'

export default class Search extends Component{
  constructor (props) {
    super(props)
    this.state = {
      keyword: ''
      ,result: []
    }
  }

  // method used to make ajax request
  crawl = () => {
    const keyword = this.state.keyword
    this.props.crawlState(true) // set crawlstate as true to show modal
    request // actual ajax request (superagent)
        .get('/crawl')
        .query({keyword: keyword})
        .end((err, res) => {
          if (err) console.log('superagent failed')
          const r = res.body.result
          this.setState({result: r})
          this.props.crawlState(false) // set crawlstate as false to hide modal
        })
  }

  onChangeHandler (e) {
    this.setState({keyword: e.target.value})
  }

  render () {
    const onChangeHandler = e => this.onChangeHandler(e)
    const keyword = this.state.keyword
    const arr = this.state.result.map((e, idx) => {
      return <div key={idx}>{e}</div>
    })

    return (
        <div>
          <input type="text" onChange={onChangeHandler} value={keyword} />
          <button onClick={this.crawl}>CRAWL</button>
          {arr}
        </div>
    )
  }
}

希望对您有所帮助。

ReactJS：在超级代理 ajax 请求期间显示带有加载消息的模式

ReactJS: show modal with loading message during superagent ajax request

javascript

ajax

modal-dialog

superagent

reactjs