使用 useContext 时，数据首先加载为空数组，当我应用 .map() 或 .find() 时

Question

我在功能组件中有以下代码：const [ folder, setFolder ] = useState([]);const folderData = useContext(FolderContext);const folderId = props.match.params.id;useEffect(() => {    retrieveData()}, [folder])const retrieveData = () => {    const findFolder = folderData.find(f => f.id === folderId);    console.log(findFolder);    setFolder(findFolder);}当我使用 console.log(folder) 时，我得到三个未定义的实例，一个未定义的实例，然后是一个包含我需要的数据的实例。如果我尝试访问文件夹内的数据，例如 folder.name，我会收到此错误消息：TypeError：无法读取未定义的属性“名称”。如何让函数仅在加载所有数据后才呈现？

Answer 1

您无法避免的初始渲染。如果您从服务器获取数据，初始加载将是未定义的，并且如果您不处理空检查，将会收到错误。

一种方法是处理 null 情况。

或者你想在收到数据后加载你的组件，你可能必须使用 React.Suspense

在您的组件收到响应之前，Suspense 会提供回退。在回退中，我们可以包含加载程序图像，以便用户在数据加载之前看到加载程序图像。

阅读更多 - https://reactjs.org/docs/concurrent-mode-suspense.html