Question

我有一个内容列表链接，当用户点击项目时，ajax请求被发送到服务器，接收的数据应该显示在react组件中。我使用componentWillReceiveProps发送请求，但刷新网址无法正常工作（路由器不会调用组件）。

它的index.js文件：

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

它的App.js文件＆＃34;渲染＆＃34;功能：

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

以及它的UmContent.js文件：

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

Answer 1

感谢您的评论和回答。正确的组成部分：

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

firstInitial = true;

componentDidMount() {
    if (this.firstInitial) {
        let props = this.props;
        this.sendRequestToServer(props);
        this.firstInitial = false;
    }
}

sendRequestToServer = (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/mygetcontenttoactionresult/" + itemId,
        type: 'GET',
        dataType: 'html'
    }).done((data)=> {
        that.setState({data: data});
    }).fail(()=> {
        that.setState({data: <div> Something is wrong</div>});
    });
}

componentWillReceiveProps(props) {
    this.sendRequestToServer(props);
}

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

现在，我只想知道：为什么每个请求都会被发送两次？

Answer 2

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

ContentWrapper包装Content组件：

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组件：

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;

这对我有用。您确定在更改路线时调用了componentWillReceiveProps吗？

在反应组件渲染中使用ajax

2 个答案: