在呈现组件时如何处理错误

Question

假设我有一个子组件

function MainContent(prop) {
return (
<main>
<p>{prop.message.message.substring(1, 5)}</p>
</main>
);
}

并在父元素中呈现，如

function App() {
const data = [
{
message: 'first message',
},
{
message: 'second message',
},
{
//message: 'third message', working
wrongkey: 'third message', // not working
},
];
return (
<div>
<Header />
{data && data.map((item) => <MainContent message={item} />)}
<Footer />
</div>
);
}

如果有任何错误的数据并且循环中的一个子组件出错那么整个页面都会出错，

我想要避免整个页面错误，只是为了显示发生错误的子组件的位置的消息。

这只是我想要实现的一个例子，我知道我可以处理像下面这样的键的错误

{prop.message.message?.substring(1, 5)}

但是根据实际数据，我们无法确定哪里可能会出现错误。

示例代码link

我在我的项目中使用Typescript

感谢

Answer 1

您可以使用条件运算符并在缺少数据时显示错误:

function MainContent(prop) {
return (
<main>
<p>{
prop.message.message
? prop.message.message?.substring(1, 5)
: "Error text"
}
</p>
</main>
);
}