Question

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

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

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

我似乎无法工作。

这是我的所作所为：我尝试了一个方法，在ajax调用之前和之后更改模态组件的道具。

感谢任何帮助！

app.js

int binarysearch(int array[], int low, int max, int search) {
    while (low <= max) {
        int middle = low + ((max - low) / 2);
        if (search > array[middle]) {
            low = middle + 1;
        }
        else if (search < array[middle]) {
            max = middle - 1;
        }
        else {
            return middle;
        }
    }

    return -1;
}

pageBody.js

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

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

search.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>
        )
    }
}

modal.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>
        )
    }
}

Answer 1

在pageBody.js组件中，您应该在构造函数内部绑定crawlState()函数，而不是在渲染内部，或者您可以使用箭头函数，如crawlState = () => {}

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

您应该绑定crawl函数以在函数内部使用this，并且您已在同一级别调用this.props crawlState()而没有任何条件，这意味着您已在两次调用setState()在您不应该执行的同一时间，因此您应在请求完成后在this.props crawlState(false)内调用end。

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：在superagent ajax请求期间显示带有加载消息的模态

1 个答案: