说我已经为/accounts
和/accounts/:id
构建了一个后端API,而我的React应用程序具有一个AccountList
组件来获取挂载的帐户。这会将列表存储在redux存储中。到目前为止,一切都很好。现在,当我导航到/accounts/1
时,我有3个选项,我想了解设计架构的最佳方法。
/accounts/1
会调用<AccountDetail ...>
,并带有特定帐户的所有属性,而AccountDetail
仅显示它。不需要其他请求,但是由于未设置道具,浏览器重新加载或直接链接到/accounts/1
将失败。/accounts/1
仅设置属性id
,并且AccountDetail
组件通过API从后端获取内容。数据将一直存在,但是当我通过列表中的链接进入时(似乎已经为所有帐户加载了帐户数据),似乎触发了多余的呼叫。/accounts/1
会设置所有属性(直接通过浏览器调用时会丢失),但仅需要id
。 AccountDetail
将检查是否仅提供id
并提取,否则从道具中获取数据。这增加了复杂的逻辑,让人感到奇怪。/accounts/1
仅设置属性id
,并且如果各个帐户不在React Store中,则AccountDetail
组件会通过API从后端获取内容,否则它将从那里获取数据。这结合了1.和2的优点。但是,由于(我想)我不能只在mapStateToProps
内部检查该组件,因为我需要触发一个异步API调用,因此向该组件添加了相当复杂的逻辑。我当前的App.js
class App extends React.Component {
render () {
return (
<BrowserRouter>
<div>
<NavBar />
<main role='main'>
<Route exact path='/' component={Home} />
<Route exact path='/accounts' component={AccountOverview} />
<Route path='/accounts/:id' render={({match}) => (<AccountDetail id={parseInt(match.params.id, 10)} />)} />
</main>
</div>
</BrowserRouter>
);
}
}
nav_bar.js
包含
<Menu.Item key={i} as={NavLink} to={item.to}>{item.text}</Menu.Item>
基本上是使用语义用户界面的<NavLink to='/accounts'>Accounts</NavLink>
。
[AccountsList
呈现a
<Link to={'/accounts/' + id}>{service}</Link>
希望这很清楚。您如何处理?处理列表和详细信息的“通用”或“最佳”方法是什么?
我也遇到了同样的问题,在解决它时遇到了一些麻烦。对我有用的方法是,我做了一个详细的视图示例“ accounts /:id”,并在axios上的componentDidUpdate()或componentDidMount()的那个组件上通过axios调用了api,并使用redux在道具中获得了有效载荷。
componentDidMount() {
this.props.getSingleEmail(this.props.match.params.id);
}
componentDidUpdate(prevProps) {
if (prevProps.match.params.id !== this.props.match.params.id) {
this.props.getSingleEmail(this.props.match.params.id);
}
}
我认为您需要同时安装和更新,以防访问其他ID,因此componentDidMount将不会触发,并且在首次加载时componentDidUpdate将不会触发。