javascript - 如何在渲染组件之前忽略子项的异常?
问题描述
我正在编写一个WithLoading
组件,如果加载为假,它将呈现子项,否则呈现加载文本。子项包含来自 ajax 调用的响应的参数。但是当它创建孩子(而不是渲染它们)时,响应为空,并引发异常。如何在呈现之前忽略异常?
这是代码示例
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div>
<MyComponent />
</div>
);
}
const WithLoading = props => {
if (props.loading) {
return <div>loading...</div>;
} else {
return props.children;
}
};
const MyComponent = () => {
const [response, setResponse] = useState(null);
useEffect(() => {
setTimeout(() => {
setResponse({ data: "data" });
}, 1000);
});
return (
<WithLoading loading={!response}>
<div>{response.data}</div>
</WithLoading>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解决方案
可以按如下方式解决:
在您的子组件MyComponent
中,您有response.data
/null
在undefined
组件的第一次挂载时,您始终可以按如下方式运行检查response && response.data
,添加response &&
, 将检查response
对象是否存在,如果存在,将返回response.data
您想要的数组。
推荐阅读
- python-3.x - 给定键值对中的已知值,提取字典中下一个键值对的值
- python - 如何迭代地将 np.arrays 写入 csv?
- file - 比较 Makefile 中的文件大小
- bash - 使用声明性管道构建不适用于 Jenkins,但适用于脚本化管道
- python - python结合26个不同时间戳和相同列的数据帧
- bash - 如何在 bash 中的文件名前添加 -A、-B 和 -C?类似于 Python 的 zip 函数
- vuejs2 - Vue 组件被销毁两次
- c++ - 对于具有 QTableWidgetItem 的单元格,不会发出 QTableWiget::cellChanged 信号
- javascript - javascript中IF语句中的多个OR条件
- pdf - 导出 PDF 图形,形状轮廓和填充区域不分离