1

我想在我Powers被获取/未定义时呈现后备组件。我React.Suspense使用代码在我的逻辑中实现：

<Suspense fallback={<p>Loading</p>}>
  <RoutesPowers />
</Suspense>

我RoutesPowers的是

const Powers = [ ... ];

const RoutesPowers = () => {

  const [powers, setPowers] = useState(null);
  const fetchPowers = () => setTimeout(() => setPowers(Powers), 3000);

  useEffect(() => fetchPowers(), []);

  return ( powers.map(route => <RoutePowers route={route}/> )

};

但它给了我Cannot read property "map" of null可能是因为它powers是空的。这意味着它React.Suspense不能正常工作。有人可以帮我吗？

4

1 回答 1

3

为了使悬念产生任何效果，树下更远的组件需要抛出一个 Promise。当这种情况发生时，suspense 将捕获它并显示回退，直到 promise 解决，然后它继续渲染它的正常子级。您的代码不会抛出任何承诺，因此 suspense 不会做任何事情。

因此，如果你想为此使用 suspense，你需要让你的组件在 rendernig 期间检测到它没有数据时抛出一个 Promise。然后进行获取并保存数据，以便当组件再次挂载时它将拥有数据（您无法设置状态，因为在此期间组件不存在，回退存在）。

const App = () => (
  <React.Suspense fallback={<p>Loading</p>}>
    <RoutesPowers />
  </React.Suspense>
)

let savedPowers = null;
const fetchPowers = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      savedPowers = ['first', 'second']
      resolve();
    }, 3000)
  });
}

const RoutesPowers = () => {
  const [powers, setPowers] = React.useState(savedPowers);
  if (!powers) {
    throw fetchPowers();
  }

  return powers.map(value => <div key={value}>{value}</div>);
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.js"></script>
<div id="root"></div>

请注意，使用这种模式并不常见。更常见的是在一个组件中处理所有内容，如果没有数据则呈现占位符，然后在效果中启动 fetch，然后在完成时更新状态。您当前的代码几乎就在那里，您只想删除<Suspense>并在 RoutesPowers 中添加代码以返回加载段落。

const RoutesPowers = () => {
  const [powers, setPowers] = useState(null);
  const fetchPowers = () => setTimeout(() => setPowers(Powers), 3000);

  useEffect(() => fetchPowers(), []);

  if (!powers) {
    return <p>loading</p>
  }

  return ( powers.map(route => <RoutePowers route={route}/> )

};
于 2020-08-21T07:11:03.587 回答