当variableis等于0时，React中不显示任何内容的三元运算符

Question

我正在尝试在单击另一个组件时渲染React组件。

onClick I将savedId设置为组件的eventKey，以在数组中呈现与该特定索引相关的正确数据。

on点击调用

<ListGroup>
{data.map((item: any, i) => (
<ListGroup.Item key={i} action eventKey={i} 
onClick={() => {setSavedId(i); console.log(i)}}>
{item.first_name} {item.last_name}
</ListGroup.Item>
))}
</ListGroup>

这里的问题是，当我的savedId等于0时，除>0，则呈现具有正确数据的组件。

三元

<Tab.Pane eventKey={savedId}>

{savedId ? <Accordian data={data[savedId]} /> : null}
</Tab.Pane>

我的第一个想法是，由于0是一个"0"；falsy"；值，条件是将其视为false并返回"0"；空"；如指定，但我已尝试使用运算符和&amp操作员，没有运气。。。

！

<Tab.Pane eventKey={savedId}>

{!!savedId ? <Accordian data={data[savedId]} /> : null}
</Tab.Pane>

&amp；

{savedId && <Accordian data={data[savedId]} />}

！AND&amp；

{!!savedId && <Accordian data={data[savedId]} />}

这是我的破解解决方案，起初它有效，但一旦刷新页面，当savedId为0 时，数据返回时未定义

{savedId ? <Accordian data={data[savedId]} /> : <Accordian data={data[0]} />}

不知道如何使这条线具有足够的防御能力，以应对savedId等于0的情况。不知道Typescript为什么会为此而抓狂。

谢谢。

Answer 1

您可以检查savedId是否是数字，而不是检查其是否为真实性。

{typeof saveId === 'number' && <Accordion />...}

0是一个falsy值，这就是为什么您的内容不呈现，因为条件未满足。