javascript - 使用 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，我会收到此错误消息:类型错误:无法读取未定义的属性“名称”。

如何让函数只在加载所有数据后才呈现？

Answer 1

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

一种方法是处理 null 情况。

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

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

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