我的最終目標是在進行API調用時訪問this.props.location.pathname內部的傳奇。這是我目前的工作解決方案，儘管反應會引發錯誤。我使用mxstbr/react-boilerplate-brand作爲我的代碼庫。從redux傳奇訪問props.location對象

在我的包裝組件App中，我在我的渲染方法中有以下行。

render() { 
    this.props.onUpdateLocation(this.props.location) 
}

在我的mapDispatchToProps我有以下。基本上我只是節省this.props.location入陣營店：

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
}

裏面我redux-saga我從國家訪問的位置，只是把它作爲需要的話;然而，這裏是React引發的錯誤。

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

我不能把它放在componentWillMount，因爲應用程序啓動時，只有被炒魷魚一次，我不能把它放在componentWillUpdate因爲this.props.location獲取的render方法更新。我不能把它放在componentDidUpdate因爲這太遲了。

我是否錯過了一些簡單明顯的方式來訪問我的redux-saga中的react-router位置？

來源

2016-09-23 Patrick Robert Shea O' Connor

，如果你有<Route path='profile' component={ Profile } /> 成型件可以訪問反應路由器道具在第二個參數的ownProps：

mapStateToProps(state, [ownProps])和 mapDispatchToProps(dispatch, [ownProps])

來源

2016-09-24 11:57:50 igl

終於開始攻擊這個問題，雖然我可以從'ownProps'訪問路由信息，結果是匹配的表達式，而不是真正的路由。即'/ brand/*/details'而不是'/ brand/starbucks/details'。 –

給通配符一個名字'/ brand /：name/details' – igl

你太棒了！我會發布我最終的解決方案，從REDX-SAGA中獲取這些參數。 –

TL; DR：

export class App extends React.Component { 
    componentWillMount() { 
    this.props.onUpdateLocation(this.props.location.pathname); 
    } 
    componentWillReceiveProps(nextProps) { 
    this.props.onUpdateLocation(nextProps.location.pathname); 
    } 
    render() { 
    // Render stuff here 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
}

我減速器收到該狀態下的動作並更新location。現在我可以使用從狀態中獲取location的選擇器來訪問當前路徑名。

龍答：

IGL的答案是相當不錯的信息，尤其是通配符命名的信息，你可以在路由使用，並通過ownProps PARAM的mapDispatchToProps返回。這是我如何解決這個問題...

最初我以爲警告是要訪問this.props.location或其他東西;然而，這是一個更簡單的問題。當你調用一個函數時，React不喜歡它，而不是因爲像點擊這樣的操作。警告信息提出了一個解決方案，使我走上了正軌。

首先看看什麼時候在哪裏觸發，我將每個React生命週期函數放在我的代碼中，當它們被擊中時進行控制檯日誌記錄。 componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount。

我發現componentWillMount在初始頁面加載時觸發，componentWillReceiveProps在每個導航上觸發。考慮到這一點，我控制檯登錄this.props.location，發現componentWillReceiveProps仍然有舊的位置;然而，這需要一個參數，nextProps具有新的位置。所以，nextProps.location是我想要的。我把它放在我的應用程序容器中，該容器將其他容器作爲它的子元素，現在我可以在我的傳說中訪問當前位置，我使用它來進行API調用。

來源

2016-10-18 21:26:24

從redux傳奇訪問props.location對象

回答

TL; DR：

龍答：

相關問題