反應 - 單擊鏈接不會導致重新呈現表

***此組件會進行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

反應 - 單擊鏈接不會導致重新呈現表

回答

相關問題