reactjs - 在 ComponentDidMount 中使用 API 调用来更新 Redux 存储使我的组件渲染两次

Question

我是 React/Redux 的新手。任何帮助都会很棒。我有一个组件，它对 ComponentDidMount 进行 API 调用以获取数据，然后更新我的 Redux 存储。该组件还使用 connect 来获取 Redux 状态并将其作为 props 传递给dumb组件。

componentDidMount() {
  this.props.dispatch(fetchSite()) //this triggers the api call and updates the redux store.
}

return ( 
  <div>
    <Child
        myprop={this.props.name}
    />
  </div>

export default connect((state) => ({name: state.name}))(Container);

因为componentDidMount在组件渲染后触发，它会渲染，运行api，然后因为api改变了redux状态而重新渲染。这使得组件渲染两次。第一次没有任何数据，第二次有来自 api 的良好数据。

有更好的方法吗？

由于我的子组件根据传递的 Prop 渲染不同的内容，因此在第一次渲染时会短暂显示不同的内容。然后，当 api 更新存储并且组件重新渲染时，它会再次显示不同的内容。这是两种不同状态的闪烁。

有没有办法让它只使用正确的 API 数据渲染一次？

Answer 1

让我们想想这里发生了什么。

页面及其所有资源都加载到浏览器中，运行脚本并渲染所有 React 组件。只有在渲染它们之后，您才能获取数据。因此，当然会有一个初始状态，然后是一个加载状态。

那么在数据进入之前，您如何处理应用程序的状态？

您已经表达了您对向应用程序提供空白数据的厌恶，这是可以理解的。您可以延迟应用程序的渲染，直到数据到达。但这会导致糟糕的用户体验。在发生任何事情之前，他们可能会盯着空白页几秒钟。

或者是旧的加载程序技巧。在初始状态下，您可能会遇到类似 isLoading: true 的情况。这对应于 React 组件中的一些视觉加载指示器(传统上是旋转的 GIF 图像)。如果您必须通过 AJAX 加载数据，这无疑是最佳选择。

更好的方法

但事情是这样的:您不需要为初始状态使用 AJAX。您可以通过将数据附加到页面来完全避免这种延迟。

<!-- place this BEFORE your Redux/React scripts -->
<script>
    // This object must match the shape of your Redux reducer state
    var __INITIAL_DATA__ = {
        todos: [{
            name: "Gather requirements",
            done: false
        }, {
            name: "Write code",
            done: false
        }]
    };
</script>

现在您所需要做的就是在创建商店时“补充”您的商店。

const store = createStore(rootReducer, window.__INITIAL_DATA__);