Reactjs React Redux-如果尚未获取阵列，如何加载详细信息？

我有一个带有redux和router的应用程序，在第一次加载时，所有用户都会被加载。为此，我实现了一个主要组件，在安装组件时加载用户：

class Content extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.load();
  }

  render() {
    return this.props.children;
  }
}

之后，如果用户选择加载一个用户的详细信息，则也可以通过相同的lifehook获取详细信息：

class Details extends Component {
  componentDidMount() {
    this.props.getByUrl(this.props.match.params.url);
  }

  render() {
    const { user: userObject } = this.props;
    const { user } = userObject;

    if (user) {
      return (
        <>
          <Link to="/">Go back</Link>
          <h1>{user.name}</h1>
        </>
      );
    }
    return (
      <>
        <Link to="/">Go back</Link>
        <div>Fetching...</div>
      </>
    );
  }

类详细信息扩展组件{
componentDidMount（）{
this.props.getByUrl（this.props.match.params.url）；
}
render（）{
const{user:userObject}=this.props；
const{user}=userObject；
如果（用户）{
返回(
回去
{user.name}
);
}
返回(
回去
获取。。。
);
}

现在，如果用户登录到主页，这项功能可以正常工作。但是，如果您直接访问链接（即），则无法正常工作，因为用户尚未加载

我举了一个简单的例子来说明我的问题。如果你点击一个链接，它会工作。如果你直接点击链接（），它不会工作

---

我该如何解决这个问题？

我们在reactiflux上的聊天总结：

回答您的问题：您将如何解决此问题？->高阶组件

您的问题归结为“在加载组件之前重新使用获取所有用户”部分

假设您希望在加载用户后显示组件，否则将显示加载div:（简单版本）

从“react redux”导入{connect}

const withUser = connect(
  state => ({
    users: state.users // <-- change this to get the users from the state
  }),
  dispatch => ({
    loadUsers: () => dispatch({type: 'LOAD_USERS'}) // <-- change this to the proper dispatch
  })
)

我们现在从connect创建了一个可重用的HOC。您可以使用withUsers包装您的组件，然后可以重新使用它，但正如您所看到的，您也在两次重新编写componentDidMount（）部分

如果没有从组件中加载实际的

部分，那么让我们将其加载到包装器中

const withUsers = WrappedComponent => { // notice the WrappedComponent
  class WithUsersHOC extends Component {
    componentDidMount () {
      if (!this.props.users || !this.props.users.length) {
        this.props.loadUsers()
      }
    }

    render () {
      if (! this.props.users) { // let's show a simple loading div while we haven't loaded yet
        return (<div>Loading...</div>)
      }
      return (<WrappedComponent {...this.props} />) // We render the actual component here
    }
  }
  // the connect from the "simple version" re-used
  return connect(
    state => ({
      users: state.users
    }),
    dispatch => ({
      loadUsers: () => dispatch({ type: 'LOAD_USERS' })
    })
  )(WithUsersHOC)
}

不再需要实现加载用户，因为
WithUsersHOC
会处理这个问题

现在，您可以使用相同的HOC（高阶组件）包装
内容
和
详细信息

在加载用户之前，它不会显示实际的组件。
加载用户后，组件将正确渲染

需要在显示之前加载用户的另一个页面吗？请将其包装在您的HOC中

现在，还有一件事可以激发更多的可重用性

如果您不希望withLoading组件只能够处理用户，该怎么办

const withLoading = compareFunction = Component =>
  class extends React.Component {
    render() {
      if (! compareFunction(this.props)) {
        return <Component {...this.props} />;
      }
      else return <div>Loading...</div>;
    }
  };

或者，写得更干净一点：

export default compose(
  withUsers,
  withLoading(props => !props.users || !props.users.length)
)(Content)

现在，您的应用程序中可重复使用
和
with users
和
with loading
这非常简单，只需检查数据是否未加载，然后在此详细视图中加载数据，和/或实现逻辑（如加载指示器或重定向）来控制用户体验，以避免显示详细视图，直到数据已加载。如果在加载数据之前可以呈现这些详细视图，则可能意味着您需要将数据加载移动到更高级别的父组件，以使其在应用程序加载时可用。您尝试了哪些选项来验证加载的数据？这是应用程序结构的问题。我建议将此问题发布在上。有很多人可以提供应用程序结构和用户体验方面的指导，因为这并不是一个具体的错误。但实际上，您有三种方法。1）检查详细信息视图是否已加载所有用户数据，如果未加载，则加载2）对于详细信息视图，实现乐趣从API或其他任何应用程序获取详细数据的操作性3）将数据加载移到主应用程序级别，以便在应用程序加载时可用，而不是列表视图再次感谢您的时间和示例的详细解释！我很高兴：-）
const withLoading = compareFunction = Component =>
  class extends React.Component {
    render() {
      if (! compareFunction(this.props)) {
        return <Component {...this.props} />;
      }
      else return <div>Loading...</div>;
    }
  };

const withUsersLoading = withLoading(props => !props.users || ! props.users.length)
const ContentWithUsersAndLoading = withUsers(withUsersLoading(Content)) // sorry for the long name

export default compose(
  withUsers,
  withLoading(props => !props.users || !props.users.length)
)(Content)