Javascript ReactJS：在superagent ajax请求期间显示加载消息的模式

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

我有一个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')
)

从“React”导入React
从“react dom”导入react dom
从“./PageBody”导入PageBody
ReactDOM.render(
，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>
        )
    }
}

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

import React，{Component}来自“React”
从“./Search”导入搜索
从“./Modal”导入模态
导出默认类PageBody扩展组件{
建造师（道具）{
超级（道具）
此.state={
爬行：错
}
}
爬行状态（正在爬行）{
this.setState（{is_crawling:is_crawling}）
}
渲染（）{
const show_modal=this.state.is_爬行
this.crawlState=this.crawlState.bind（this）
返回(
)
}
}

---

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

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

import React，{Component}来自“React”
“超级代理”的导入请求
导出默认类搜索扩展组件{
建造师（道具）{
超级（道具）
此.state={
关键字：“”
，结果：[]
}
}
//用于发出ajax请求的方法
爬行（）{
const关键字=this.state.keyword
this.props.crawlState（true）//将crawlState设置为true以显示模态
请求//实际ajax请求（超级代理）
.get（“/crawl”）
.query（{关键字：关键字}）
.end（（错误、恢复）=>{
if（err）console.log（'超级代理失败'）
常数r=res.body.result
this.setState（{result:r}）
})
this.props.crawlState（false）//将crawlState设置为false以隐藏模式
}
onChangeHandler（e）{
this.setState（{关键字：e.target.value}）
}
渲染（）{
const onChangeHandler=e=>this.onChangeHandler（e）
const crawl=this.crawl（）
const关键字=this.state.keyword
const arr=this.state.result.map（（e，idx）=>{
返回{e}
})
返回(
爬行
{arr}
)
}
}

---

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
        }
    }
}

import React，{Component}来自“React”
导出默认类模式扩展组件{
建造师（道具）{
超级（道具）
此.state={
节目：假
}
}
组件将接收道具（下一步）{
const show_model=nextrops.show_model
this.setState（{show:show_modal}）
}
渲染（）{
if（this.state.show）{
返回
}否则{
返回空
}
}
}

在

pageBody.js

组件中，应该在构造函数中绑定

crawlState（）

函数，而不是在渲染中，或者可以使用箭头函数，如

crawlState=（）=>{}

在

search.js

组件中，在

onClick

函数上使用

this.crawl

，而不是创建新的常量变量

您应该绑定

crawl

函数以在函数内部使用

this

，并且您在同一级别调用了

this.props crawlState（）

，没有任何条件，这意味着您不应该在同一时间调用两次

setState（）

，因此您应该调用

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
        }
    }

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

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

import React，{Component}来自“React”
从“./Search”导入搜索
从“./Modal”导入模态
导出默认类PageBody扩展组件{
建造师（道具）{
超级（道具）
此.state={
爬行：错
}
this.crawlState=this.crawlState.bind（this）
}
爬行状态（正在爬行）{
this.setState（{is_crawling:is_crawling}）
}
渲染（）{
const show_modal=this.state.is_爬行；
返回(
)
}
}

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

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

import React，{Component}来自“React”
“超级代理”的导入请求
导出默认类搜索扩展组件{
建造师（道具）{
超级（道具）
此.state={
关键字：“”
，结果：[]
}
}
//用于发出ajax请求的方法
爬网=（）=>{
const关键字=this.state.keyword
this.props.crawlState（true）//将crawlState设置为true以显示模态
请求//实际ajax请求（超级代理）
.get（“/crawl”）
.query（{关键字：关键字}）
.end（（错误、恢复）=>{
if（err）console.log（'超级代理失败'）
常数r=res.body.result
this.setState（{result:r}）
this.props.crawlState（false）//将crawlState设置为false以隐藏模式
})
}
onChangeHandler（e）{
this.setState（{关键字：e.target.value}）
}
渲染（）{
const onChangeHandler=e=>this.onChangeHandler（e）
const关键字=this.state.keyword
const arr=this.state.result.map（（e，idx）=>{
返回{e}
})
返回(
爬行
{arr}
)
}
}

希望这是w