反应 - 单击链接不会导致重新呈现表

***此组件会进行REST API调用并分析承诺值并以表格形式呈现数据。加载（函数）使API调用并将orderType作为输入。 OrderType作为查询参数从导航组件传递到此处未包含的组件。反应 - 单击链接不会导致重新呈现表

class SampleController extends React.Component { 
    constructor(props){ 
     super(props); 
     let orderType = this.props.location.query.orderType; 
     this.load = this.load.bind(this); 
     this.load(orderType); 
     this.state = {orderType: orderType, data: null} 
    } 


load(orderType) { 
    let self = this; 
    console.log("order type is" + orderType); 
    let baseURL = base_urls.orderMetricsBaseURL; 
    console.log("base URL is", baseURL); 
    let url = baseURL + "/getData"; 


    let response_data = fetch(url, { 
       method: 'POST', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
       }, 
       body: JSON.stringify({ 
        order_type: orderType 
       }) 
      }) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     let order_data = responseJson; 
     console.log("responseeeeee is: ", order_data); 
     self.setState({data: order_data}); 
     self.forceUpdate(); 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    var content = <DataTable dataList = {this.state.data} />; 
    return (
     content 
    ); 
    } 
} 

export { SampleController as default };

来源

2017-02-08 Suchi

setState()不会立即更新状态，所以有你失去的，因为forceUpdate()的是更新的机会，这应该没有必要为setState()将触发本身重新绘制。尝试删除forceUpdate()电话。

更新：

如果你想每次打电话给你load()方法你orderType你需要订阅componentWillReceiveProps方法。

例子：

class SampleController extends React.Component { 
    constructor(props){ 
    super(props); 
    let orderType = this.props.location.query.orderType; 
    this.load = this.load.bind(this); 
    this.load(orderType); 
    this.state = {orderType: orderType, data: null} 
    } 

componentWillReceiveProps(nextProps) { 
    const orderType = nextProps.location.query.orderType; 
    const prevOrderType = this.props.location.query.orderType; 

    if (prevOrderType !== orderType) { 
    this.load(orderType); 
    } 
} 

load(orderType) { 
    let self = this; 
    console.log("order type is" + orderType); 
    let baseURL = base_urls.orderMetricsBaseURL; 
    console.log("base URL is", baseURL); 
    let url = baseURL + "/getData"; 


    let response_data = fetch(url, { 
       method: 'POST', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
       }, 
       body: JSON.stringify({ 
        order_type: orderType 
       }) 
      }) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     let order_data = responseJson; 
     console.log("responseeeeee is: ", order_data); 
     self.setState({data: order_data}); 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    var content = <DataTable dataList = {this.state.data} />; 
    return (
     content 
    ); 
    } 
} 

export { SampleController as default };

来源

2017-02-08 01:21:29

去除forceupdate（）未与API的时候订单类型上的UI – Suchi

我误解你的问题改变了（尽管你不需要'forceUpdate没有得到触发的问题帮助（）'反正）。那么，每次'orderType'改变时你想调用'load（）'？在这种情况下，你应该使用'componentDidUpdate'方法并在那里调用你的'load（）'。将以示例更新答案。 –

谢谢你的回应。您能否给我提供一个示例，说明如何在上述上下文中使用componentDidUpdate和componentWillUpdate？ – Suchi

删除此行this.load(orderType);从构造函数，并把它里面componentDidMount：

constructor(){ 
//.... 
} 

componentDidMount() { 
    const orderType = this.props.location.query.orderType; 
    this.load(orderType); 
}

来源

2017-02-08 01:21:32

尝试了你的建议，但是没有工作。相同的数据再次被渲染，并且当orderType改变时load函数没有被触发，load函数只被调用一次。 – Suchi

你需要做setState触发您的组件上重新运行/重新呈现。

从documentation：

来源

2017-02-08 01:22:28

反应 - 单击链接不会导致重新呈现表

回答

相关问题