在反应组件渲染中使用 ajax [英] using ajax in react component render

问题描述

我有一个内容链接列表，当用户点击项目时，ajax 请求被发送到服务器，接收到的数据应该显示在反应组件中.我使用 componentWillReceiveProps 发送我的请求，但刷新 url 不起作用(路由器不调用组件).

这是 index.js 文件:

 渲染((<路由器历史={hashHistory}><Route path="/" component={App}><Route path="/content/:id" component={UmContent}/></路线></路由器>), document.getElementById('root'));

它是 App.js 文件的渲染"函数:

render() {返回 (<div><h1>应用</h1><ul>{this.renderItems()}</ul>{this.props.children}

);}

这是 UmContent.js 文件:

 导出默认类 UmContent extends Component {状态 = {数据: ''}componentWillReceiveProps(props) {if (!props || !props.params || !props.params.id) {返回;}console.log(props.params.id);让 itemId = props.params.id;让那个=这个；$.ajax({url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/" + itemId,类型:'获取'，数据类型:'html'}).done((数据)=>{that.setState({data: data});}).fail(()=>{that.setState({data: <div>有问题</div>});});}使成为() {返回 (<div ref="aaa"><UmC 内容={this.state.data}/>

);}}

解决方案

看来你做错了什么.我为自己重写了你的代码.

ContentWrapper 包裹 Content 组件:

import React, {Component, PropTypes} from 'react';从'./content'导入内容；类 ContentWrapper 扩展组件 {状态 = {参数:'/东西'，}componentWillMount() {//模拟 react-router 属性改变setTimeout(() => {this.setState({params: '/something-else'})})}使成为() {返回(<内容参数={this.state.params}/>)}}module.exports = ContentWrapper;

Content 组件:

import React, {Component, PropTypes} from 'react';var $ = require("jquery");类内容扩展组件{状态 = {文本:'待定...'}componentWillReceiveProps(nextProps) {$.ajax({url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/item",类型:'获取'，数据类型:'json'}).done((数据)=>{this.setState({text: '成功'});}).fail(()=>{this.setState({text: '失败'});});}使成为() {返回(<跨度>{this.state.text}</span>)}}module.exports = 内容；

这对我有用.你确定 componentWillReceiveProps 在路由改变时被调用吗?

I have a list of contents link, when user clicks item, an ajax request is sent to server and received data should be shown in a react component. I used componentWillReceiveProps to send my requests, but refresh the url doesn't work (Router doesn't call component).

it's index.js file:

 render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
                <Route path="/content/:id" component={UmContent} />
        </Route>
    </Router>
), document.getElementById('root'));

it's App.js file's "render" function:

render() {
    return (
        <div>
            <h1>App</h1>
            <ul>{this.renderItems()}</ul>
            {this.props.children}
        </div>
    );
}

and it's UmContent.js file:

 export default class UmContent extends Component {
    state = {
        data: ''
    }

    componentWillReceiveProps(props) {

        if (!props || !props.params || !props.params.id) {
            return;
        }
        console.log(props.params.id);
        let itemId = props.params.id;
        let that = this;
        $.ajax({
            url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/" + itemId,
            type: 'GET',
            dataType: 'html'
        }).done((data)=> {
            that.setState({data: data});
        }).fail(()=> {
            that.setState({data: <div> Something is wrong</div>});
        });
    }

    render() {
        return (
            <div ref="aaa">
                <UmC content={this.state.data}/>
            </div>);
    }
}

解决方案

It seems you did something wrong. I rewrite your code for myself.

ContentWrapper to wrap Content component:

import React, {Component, PropTypes} from 'react';
import Content from './content';

class ContentWrapper extends Component {
  state = {
    params: '/something',
  }

  componentWillMount() {
    // Simulate react-router property changing
    setTimeout(() => {this.setState({params: '/something-else'})})
  }

  render() {
    return(
      <Content params={this.state.params} />
    )
  }
}

module.exports = ContentWrapper;

Content component:

import React, {Component, PropTypes} from 'react';
var $ = require("jquery");

class Content extends Component {
  state = {
    text: 'Pending...'
  }

  componentWillReceiveProps(nextProps) {
    $.ajax({
      url: "http://192.168.78.2:8585/Default/mygetcontenttoactionresult/item",
      type: 'GET',
      dataType: 'json'
    }).done((data)=> {
      this.setState({text: 'Success'});
    }).fail(()=> {
      this.setState({text: 'Fail'});
    });
  }

  render() {
    return(
      <span>
        {this.state.text}
      </span>
    )
  }
}

module.exports = Content;

This works for me. Are you sure componentWillReceiveProps is called when route is changed?

这篇关于在反应组件渲染中使用 ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！