使用 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