Javascript 条件呈现无法工作，因为尚未定义变量

我正在尝试进行条件渲染，以便在我的React应用程序中显示“编辑和删除”按钮

<div>
        {author_id === user_id &&
        <Container>
        <Row xs="2">
        <Col><Button color="primary" size="sm">Edit</Button></Col>
        <Col><Button color="danger" size="sm">Delete</Button></Col>
        </Row>
        </Container>
        }}
 </div>

---

既然这两个变量现在没有值，我该怎么做才能让代码正常工作呢。使用NaN作为默认值。与每个数字进行比较时，比较返回false。将NaN与NaN进行比较也是错误的

NaN==128；//错误的 NaN==‘mau’；//错误的 NaN==NaN；//错误的 因此，即使您有一个值，如user_id，而不是另一个，它仍然会导致false，因此不会呈现代码段

但正如JMadelaine-alse所提到的，如果您还没有任何数据或呈现加载图标，那么最好不要呈现任何内容

render() {
    if(!this.state.albums.length) {
        return <span>Loading</span>
    }

    //.. other rendering
    return <div>{/*...*/}</div>
}

这应该可以做到。

您需要检查用户id和作者id是否都为真，然后检查它们是否相同，然后渲染按钮

像这样的东西可以满足您的需求：

render() {
    const user_id = this.context.user ? this.context.user.sub : null;
    const author_id = this.state.albums[0] ? this.state.albums[0].author : null;
    const shouldRenderButton = user_id && author_id && user_id === author_id;

    return (
        ...
        { shouldRenderButton && <div>...</div> }
        ...
    )
}

---

如果还没有数据，为什么要显示按钮？哪个部分不起作用？您希望发生什么？我想知道当我将数据加载到这些变量时，如何加载这些按钮。当前发生了什么？按钮正在渲染吗？如果author\u id==user\u id，那么我需要对代码进行条件呈现，而不是render:where author\u id=this.state.albums[0]。author并让user\u id=this.context.user.sub。因为如果这是真的，我只想显示按钮。

render() {
    const user_id = this.context.user ? this.context.user.sub : null;
    const author_id = this.state.albums[0] ? this.state.albums[0].author : null;
    const shouldRenderButton = user_id && author_id && user_id === author_id;

    return (
        ...
        { shouldRenderButton && <div>...</div> }
        ...
    )
}