Question

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

使用特定帐户的所有属性链接到/accounts/1来电<AccountDetail ...>，AccountDetail只显示它。无需其他请求，但浏览器重新加载或指向/accounts/1的直接链接将失败，因为没有设置道具。
仅链接到/accounts/1设置属性id，AccountDetail组件通过API从后端获取内容。数据将始终存在，但当我通过列表中的链接（其中已为所有帐户加载了帐户数据）时，似乎会触发多余的调用。
从列表中链接到/accounts/1会设置所有属性（直接通过浏览器调用时都会丢失），但只需要id。 AccountDetail将检查是否仅提供id并获取，否则从道具获取数据。这增加了复杂的逻辑，感觉很奇怪。
仅/accounts/1设置属性id的链接，AccountDetail组件通过API从后端获取内容（如果相应的帐户不在react存储中），否则获取数据从那里。这结合了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>使用语义ui。

AccountsList呈现

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

希望它足够清楚。你是怎么处理的？什么＆＃34;普通＆＃34;或者＆＃34;最好的＆＃34;处理清单和细节的方法？

Answer 1

我遇到了同样的问题，但在解决它时遇到了一些麻烦。对我有用的方法是，我做了一个详细的视图示例“ 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也不会触发。

何时以及如何在react / router / redux app中获取详细视图的数据？

1 个答案: