Question

我想像一种路由方案不起作用，我不知道当时采用哪种解决方案：

我的网址被路由为

/levelOne/:levelOne
/levelOne/:levelOne/levelTwo/:levelTwo

ect ... 在开始渲染方法之前，我将 levelOne 和 levelTwo 值保存在localStorage

中

function renderComplaintHome(props) {
    const LOCAL_CACHE = gql`
            query localCache {
                kind @client
                eid @client
            }
        `

    return (
            <Query query={LOCAL_CACHE}>
                {({data, client}) => {
                    console.log("Writing route params to local cache ", props.match.params)
                    client.writeData({data: props.match.params})
                    return <ComplaintHome {...props}/>
                }}
            </Query>)
}

...
class App extends Component {

    render() {
        return (
                <MuiThemeProvider theme={theme}>
                    <BrowserRouter>
                        <Switch>
                            </Route>
                            <Route exact path="/:kind"
                                         render={renderComplaintHome}>
                            </Route>
                            <Route path="/:kind/search/:name"
                                         render={renderComplaintHome}>
                            </Route>
                            <Route exact path="/:kind/shop/:eid"
                                         render={renderComplaintHome}>

...

这实际上可以正常工作：如果我手动键入url，则可以在localStorage中找到正确的值

在我的组件中，我将localStorage用作唯一的事实来源，因此，如果要更改url，请更改本地状态，这会触发带有新值的url。

由于路由会将新值设置为localStorage，因此视图现在应该可以看到新值，而不必从props中读取它们：每个组件独立于其他组件执行查询，而其他组件则从loal存储中获取其值。

onEntitySelected(event, {suggestion}) {
    const data = {name: suggestion.name};
    console.log("writing data to cache: ", data)
    this.client.writeData({data: data})
    window.alert('setting state id to '+ suggestion._id)
    this.eid = suggestion._id
}

render() {
//... some rendering code, then a conditional routing
{this.eid != null && this.eid !== localData.eid && <Redirect to={`/${localData.kind}/shop/${this.eid}`}/>

}

现在我的问题是这不起作用：localStorage永远不会更新：我收到错误消息

警告：无法在现有状态转换期间（例如，在render或其他组件的构造函数中进行更新）。渲染方法应该纯粹是道具和状态的函数；构造函数的副作用是反模式，但可以移至componentWillMount。

现在，如果我想将localStorage更新移动到componentWillMount，则由于没有url参数而无法进行操作：该路线仅提出了render方法：

                    <Route exact path="/:kind/shop/:eid"
                                 render={renderComplaintHome}>

有什么想法吗？

如果问题不清楚，请随时发表评论，我会尽力使其可读性

Apollo localStorage与react-router的最佳实践

0 个答案: