问题

以下是您要翻译的代码部分：

Let's say I have a child component

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

and rendering it in parent like

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>
    );
}

Let's say if there is any wrong data and one of the child components inside the loop gets an error, then the whole page errors,

what I want to avoid whole page error just to show a message of that place of child component where the error occurred.

This is just a sample of what I am trying to achieve. I know I can handle the error of a key like below

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

But with actual data, we cannot be sure where the error may occur.

[sample code link][1]

I am using TypeScript in my project

Thanks

[1]: https://stackblitz.com/edit/react-parent-child-component-i4tc25?file=src/MainContent.js

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)}

答案1

得分: 1

你可以使用条件运算符，在数据丢失时显示错误：

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

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