当使用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);
}

当我控制台.log(文件夹(时，我得到了三个未定义、未定义的实例，然后一个实例中有我需要的数据。如果我试图访问文件夹(如folder.name(内的数据，我会得到以下错误消息：TypeError:无法读取未定义的属性"name"。

如何使函数仅在加载所有数据后进行渲染？

Answer 1

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

一种方法是处理null情况。

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

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

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