反应：如果 json 父标签不存在，则跳过行

Question

我处于以下情况，并遇到以下问题。

我正在开发一个从 .json 文件中读取数据的应用程序。我以行形式存储此数据。现在.json文件可以不同，因此我必须涵盖每种情况(有很多情况)。如果 .json 中不存在标记，则不应显示此行。

现在可能会发生我已经涵盖了一个搜索data.test.person但 JSON 中不存在data.test的情况。

案例可能如下所示：

<TestAntragsdatenAbschnitt
title={"Test"}
value={data.test}>

<TestAntragsdatenRow
label1={"Person"}
value1={data.test.person}
/>
</TestAntragsdatenAbschnitt>

这是我的组件。

export default class TestAntragsdatenAbschnitt extends React.Component {
value;
title;
render() {
this.value = this.props.value;
this.title = this.props.title;
return (
<>
<h4 className={"antragsdatenAbschnitt"}>
{checkAbschnitt(this.title, this.value)}
</h4>
{this.value != null &&
this.props.children
}
</>
);
}
}

使用查询this.value != null &&我尝试解决该错误。

我得到的错误：TypeError: Cannot read property 'person' of undefined

我现在的问题是，如果存在JSON标签，我如何查询它们，如果是的话，应该检查行。如果不是所有带有此标记的行都应跳过。

Answer 1

Object.keys(data).includes('test')可以是一种检查 JSON 对象是否具有该属性的方法。

还有很多其他方法。您也可以尝试：

value1={data.test ? data.test.person : 'error'}一种安全空检查的方法

Answer 2

你的代码有几个问题，但让我们尝试解压缩所有内容：

您将两个道具(title和value传递给名为TestAntragsdatenAbschnitt的组件。您应该在道具中接收，因此您无需将它们存储在字段(例如this.value = this.props.value)中。

相反，只需在渲染函数中执行此操作：const {title, value, children} = this.props;

现在你不需要使用this.title和this.value，而只需要title和value.

好的，我们解决了这个问题，现在让我们弄清楚为什么您的可选键不起作用：

现在你应该像这样渲染你的孩子：

{children}

现在您需要有条件地呈现特定行，而这根本不应该在此组件中完成。这应该在渲染TestAntragsdatenAbschnitt的组件(您在帖子中编写的第一个组件)中完成。

所以你会做这样的事情：

<TestAntragsdatenAbschnitt
title={"Test"}
value={data.test}>
{data && data.test && data.test.person ? (
<TestAntragsdatenRow
label1={"Person"}
value1={data.test.person}
/>
) : (
<p>data.test.person is not valid</p>
)}
</TestAntragsdatenAbschnitt>

如您所见，我与三元运算符检查data.test.person是否不为 null，如果不是，则只需呈现行，如果不是，则只需执行其他您想要的操作。

您可以在其他组件中执行此操作，但在我看来，这样会更干净。