iT邦幫忙

0

[慟] [react-router-dom] <Redirect /> 跳轉只會re-render Component的render

目前情況

  • 一個表單Component
  • 一個列表Component

動作

表單送出資料後,跳轉到列表,跳轉到列表後,會更新已送出資料

說明

這動作其實很常見,但是在SPA裡面作法就要轉一下

表單跳轉:會回傳state告訴表單要重新撩取資料

    <Redirect
            to={{
                pathname: '/product/table',
                state: { reload:true}
            }}
        />

列表撈取資料的function:

	getProduct() {
        axios.get(`http://localhost/product`).then(response => {
                    this.setState({ product: response.data })
        })
     }

但問題是跳轉到列表Component時這個state.reload只會在render中出現
我在列表得constructorrender都有console.log,但最後只有在render裡面才有出現資料

https://ithelp.ithome.com.tw/upload/images/20180202/20103556jptCXjT3Gx.png

那這樣就有問題了?
假設我要抓取<Redirect>傳來的state.reload去判斷是否要更新,就必須把getProduct放到render
執行

但是this.setState 是不能在render 執行的

	getProduct() {
        axios.get(`http://localhost/product`).then(response => {
                    this.setState({ product: response.data })
        })
     }

那這時候揪竟該如何解決呢?


解法

componentWillReceiveProps(nextProps) {
		if (nextProps.location.state !== undefined && nextProps.location.state.reload === true) {
			axios.get(`${APIURL.localhost}/product`).then(response => {
				this.setState({ product: response.data })
			})
		}
	}

尚未有邦友留言

立即登入留言