reactjs - 何时以及如何在react/router/redux应用程序中获取详细 View 的数据？

Question

假设我已经为 /accounts 构建了一个后端 API和/accounts/:id我的 React 应用程序有一个 AccountList组件在挂载时获取帐户。这会将列表存储在 redux 存储中。到目前为止，一切都很好。 当我现在导航到/accounts/1时我有 3 个选项，我想知道设计架构的最佳方法。

1. 链接至/accounts/1来电 <AccountDetail ...>包含特定帐户的所有属性和 AccountDetail只是显示它。不需要额外的请求，但需要重新加载浏览器或直接链接到 /accounts/1将会失败，因为没有设置 props。
2. 链接至/accounts/1设置属性 id仅和 AccountDetail组件通过API从后端获取内容。数据将始终存在，但当我通过列表中的链接(其中已加载所有帐户的帐户数据)时，似乎正在触发多余的调用。
3. 链接至/accounts/1列表中设置所有属性(通过浏览器直接调用时会丢失)，但仅 id是必须的。 AccountDetail会检查是否只有 id提供并获取，否则从 Prop 中获取数据。这增加了复杂的逻辑，感觉很奇怪。
4. 链接至/accounts/1设置属性 id仅和 AccountDetail如果相应的帐户不在 React 存储中，组件会通过 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呈现一个

<Link to={'/accounts/' + id}>{service}</Link>

希望它足够清楚。 你怎么处理这个问题？处理列表和详细信息的“常见”或“最佳”方法是什么？

Answer 1

我也遇到了同样的问题，但修复起来遇到了一些麻烦。对我有用的方式是，我做了一个详细 View 示例“accounts/:id”，并在该组件中的 componentDidUpdate() 或 componentDidMount() 上通过 axios 调用 api，并使用 redux 在 props 中获取有效负载。

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 将不会触发。