Question

我有一个有状态组件，该组件在componentDidMount()中提取一个用户列表。在检查列表是否为空之后，立即创建一个占位符以显示。

由于列表的获取是异步操作，因此我不应该像这样检查空列表：

componentDidMount() {
  this.props.dispatch(fetchUsersOfList());
  if (this.props.userBases.length === 0) {
    ...
  }
}

我目前可以通过在componentDidUpdate()内编写if语句来解决此问题：

componentDidUpdate(prevProps) {
  if (this.props.userBases.length === 0) {
    if (this.props.currentBase !== prevProps.currentBase) {
      ...
    }
  }
}

我正在使用redux并在每个功能运行/完成后更新状态。现在的问题是，每次我延迟这样的操作时，都会延迟向用户显示数据。最终，这加起来并很明显。因此，用户看到转动装载轮的时间增加了。

还有另一种更快的方法来解决这个概念吗？

Answer 1

我相信您会从您的操作中返回响应有效负载，并且还会引发错误。您可以像这样在then中获得已解决的承诺：

componentDidMount() {
this.props.dispatch(fetchUsersOfList()).then((response)=>{
if (// your condition goes here") {
    ...
  }
 })
}

随时问任何问题

Answer 2

我不确定您所说的占位符是什么意思，但很可能您有以下两种需求之一：

如果列表为空，请显示一条消息而不是li。（未找到数据或沿此方向有东西）
或在等待数据时显示一些初始文本（例如，正在加载...）

第一个基本上是conditional rendering。在您的render方法中，您可以看到以下内容：

if (this.props.userBases && this.props.userBases.length > 0 ) {
   return <Blah />
} else {
   return <Placeholder />
}

第二个挑战实质上是设置initial state。想法是给组件一个初始状态，然后在异步动作完成后，它会更新状态并做出反应以重新呈现它。我没有使用redux，但他们似乎为此提供了a recipe。

更新在仔细阅读您的问题时，我认为您也在错误地使用生命周期。我强烈建议您阅读async rendering in react上的官方博客文章，以更好地了解生命周期。

Answer 3

通过connect方法处理您的订阅。

import { connect } from 'react-redux';
const mapStateToProps = (state) => {
const items = cartItemsSelector(state);
return {
    items,
    fetched: items !== null
}
};

export const CartItemListContainer = connect(
   mapStateToProps
)(CartItemListDisplay);

Answer 4

您不需要保存状态。您可以从渲染提早返回，结果会有所不同。当道具更改时，将使用较新的道具再次调用渲染。

class MyComponent {
  render() {
    const { items } = this.props;
    if (!items || !items.length) return <span>Loading...</span>;

    return <List items={items} />;
  }
}

componentDidMount（）

4 个答案: