javascript - React 在 fetch 调用填充 Redux 存储时延迟渲染

Question

有没有办法在进行 fetch 调用以填充 Redux 存储时延迟 React 渲染，以便当渲染从存储中调用 this.props 时数据已经存在？我遇到一个问题，渲染方法中的存储调用正在调用当前为空对象的存储，这会导致渲染崩溃。

到目前为止，我想出的解决方案是制作一个带有空数据的空 JSON，渲染器首先调用该 JSON，然后当获取成功时，它会调用现在填充的 Redux 存储，但是有没有更有效的方法？

Answer 1

您不想延迟任何渲染，这是一部分或 react 功能。

它在获取新数据( Prop 、状态)时进行渲染。

就您的情况而言，您需要解决不同的“数据情况”

所以首先你的 reducer 应该有一个默认状态，即:

{
  "loading": false,
  "username": null,
  "isLoaded": false
}

现在，您可以在代码中处理不同的数据并相应地渲染差异 View

const YourComponent = props => {
  if (props.loading) {
    return <h1>loading</h1>
  }
  if (props.loaded && props.username==null) {
    return <h1>cant find user</h1>
  }
  return <h1>{props.username} is loaded</h1>
}

这只是一个示例，您的代码应该更好、更有组织:)