javascript - 如果没有加载任何内容，如何不显示任何内容

Question

我正在从 Context.Provider 中设置 user_id ，并从数据库中的数据中设置 album_id 。如果这两个变量已设置并且彼此相等，我将添加两个按钮(编辑和删除)并设置加载微调器(如果尚未设置值)。

在这里，我从数据库中获取数据并将其设置为author_id，并从另一个组件中获取Context.Provider以设置为user_id。

this.state = {
      loading: false,
    };

    componentDidMount() {
      const { match: { params} } = this.props;
      console.log('COMPONENT HAS MOUNTED');

      this.setState({ loading : true });
      fetch(`http://localhost:8000/albums/${params.albumId}`)
        .then((response) =>
          response.json())
        .then((data) => {
              this.setState({ albums : data });
            }).then(()=> {
            this.setState({ loading : false });
           }).catch((error) => {
                console.log("Error " + error)
              })
    }

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;

Album.contextType = Auth0Context;

如果这两个变量都已设置且彼此相等，我将呈现两个按钮(编辑和删除):

<div>
    {shouldRenderButton ?
    <Container>
    <Row xs="2">
    <Col><Button color="primary" size="sm">Edit</Button></Col>
    <Col><Button color="danger" size="sm">Delete</Button></Col>
    </Row>
    </Container> : <Spinner size="sm" color="secondary" />
    }
 </div>

当我等待添加数据时，我有一个微调器。我想要做的是，如果 album_id 不等于 user_id 我想不显示任何内容并停止旋转。正如您所看到的，我首先将加载设置为 false，在获取数据之前设置为 true，在获取数据后设置为 false，但我不确定如何在我的代码中使用它。

Answer 1

好的，根据您的代码，您应该在渲染中执行类似的操作:

if (loading) return <Spinner />
return (
  shouldRenderButton ? <YourJsxFragment /> : null
)

IMO 使用嵌套三元组会使代码不可读，因此我喜欢使用 if 语句返回内容，而不是仅将所有内容包装在一个 return 语句中。

如果您不想显示任何内容，可以返回null。