Javascript 如果未加载任何内容，如何显示“未加载”

我正在从我的Context.Provider设置

user\u id

，并从数据库中的数据设置

album\u id

。如果这两个变量已设置且彼此相等，我将添加两个按钮（编辑和删除），并在尚未设置值时设置加载微调器

在这里，我从数据库中获取数据并将其设置为author\u id，同时从另一个组件中获取Context.Provider以设置为user\u 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;

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

{应该按RenderButton吗？
编辑
删除
: 
}

---

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

您应该能够使用本文引用的

.finally（）

。基本上，您是说，无论是200还是错误（4XX等等），您都需要停止微调器

render() {
    const { loading } = this.state;
    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 (
      <>
        {loading && <Spinner size="sm" color="secondary" />}
        {shouldRenderButton && !loading && (
        <Container>
          <Row xs="2">
            <Col><Button color="primary" size="sm">Edit</Button></Col>
            <Col><Button color="danger" size="sm">Delete</Button></Col>
          </Row>
        </Container>
        )}
      </>
    )
    }
  }

（最新更新）

可以转换为

const shouldRenderButton = !this.state.loading && (user_id && author_id && user_id === author_id);

.then((data) => {
          this.setState({ 
              albums : data, 
              loading : false 
          });
        })
.catch((error) => {
          this.setState({ loading : false });
          console.log("Error " + error)
          })

可将

.then（）

s更改为

const shouldRenderButton = !this.state.loading && (user_id && author_id && user_id === author_id);

.then((data) => {
          this.setState({ 
              albums : data, 
              loading : false 
          });
        })
.catch((error) => {
          this.setState({ loading : false });
          console.log("Error " + error)
          })

（/最新更新）

---

让我知道这是否有效。

如果我理解正确，您可以使用

加载

和

应渲染按钮

，类似于：

<div>
  {
    loading ?
      <Spinner size="sm" color="secondary" />
    :
      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>
      :
        <div></div>
  }
</div>

---

根据您的代码，您应该在渲染中执行以下操作：

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

if（加载）返回
返回(
shouldRenderButton？：空
)

IMO使用嵌套的ternaries使代码不可读，所以我喜欢使用if语句来返回内容，而不是将所有内容包装在一个return语句中

---

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

这将确保

更新相册后加载
将设置为
false

  componentDidMount() {
    const { match: { params} } = this.props;
    this.setState({ loading: true });
    fetch(`http://localhost:8000/albums/${params.albumId}`)
      .then((response) => response.json())
      .then((data) => this.setState({
        albums: data
      }, () => {
        this.setState({ loading: false }); // here
      }))
      .catch((error) => {
        this.setState({ loading : false });
      });
  }

现在，根据您的要求，希望这将完成您的工作，并且不显示任何内容&停止旋转器

render() {
    const { loading } = this.state;
    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 (
      <>
        {loading && <Spinner size="sm" color="secondary" />}
        {shouldRenderButton && !loading && (
        <Container>
          <Row xs="2">
            <Col><Button color="primary" size="sm">Edit</Button></Col>
            <Col><Button color="danger" size="sm">Delete</Button></Col>
          </Row>
        </Container>
        )}
      </>
    )
    }
  }

render（）{
const{loading}=this.state；
const user_id=this.context.user？this.context.user.sub:null；
const author\u id=this.state.albums[0]？this.state.albums[0]。作者：null；
const shouldRenderButton=user\u id&&author\u id&&user\u id===author\u id；
返回(
{加载&&}
{shouldRenderButton&&！正在加载&&(
编辑
删除
)}
)
}
}
如何在代码中使用加载状态的值来显示是真是假？好的，正在检查，但按钮现在显示出来（如预期的那样）？现在好多了？请注意（编辑2）。并且，请使用问题中发布的JSX。新更新保持加载栏加载，不显示按钮。如果尚未解决，请参考新更新的部分。由于某些原因，这不会在allI added
let{loading}=this.state.loading处显示加载微调器仍然不起作用它的
让{loading}=this.state
，不需要结尾处的
.loading
，我想这可能会起作用，但我会在this.state.albums获得数据后立即将loading添加到false。我需要在设置用户id和相册id后设置它。知道怎么做吗？