ReactJS中三元运算符的问题

Question

我正在尝试使用三元运算符来显示我在reactJSm中的加载状态，但我不明白为什么它始终为真，我正在使用reactotron调试我的状态及其正常工作” onload：在加载后加载true：错误，但是当我使用运算符时，它总是正确的。有人可以帮助我吗？

我尝试使用loading = {loading吗？ 1：0}在容器内，但没有任何变化...

<Container>
      <Content>
        <header>
          <p>Meus Meetups</p>
          <button type="button">Novo Meetup</button>
        </header>
        <ul>
          {loading ? (
            <AiOutlineLoading color="#eb3443" size={40} />
          ) : (
            meetups.map(meetup => (
              <MeetList key={meetup.id}>
                <Link to={`/details/${meetup.id}`}>
                  <strong>{meetup.title}</strong>
                  <p>
                    {format(parseISO(meetup.date), `dd 'de' MMMM 'às' HH'h'`, {
                      locale: pt,
                    })}
                  </p>
                </Link>
              </MeetList>
            ))
          )}
        </ul>
      </Content>
    </Container>

Answer 1

操作员看起来不错。您确定加载状态具有有效值吗？尝试将加载更改为硬编码的假值，以验证运算符是否正确。

Answer 2

我以前有过这个问题。不知道这是否对您有用，但是对我有用的是改为像这样配置它：

{this.state.loading && 
   <AiOutlineLoading color="#eb3443" size={40} />
}
{!this.state.loading && 
    (
            meetups.map(meetup => (
              <MeetList key={meetup.id}>
                <Link to={`/details/${meetup.id}`}>
                  <strong>{meetup.title}</strong>
                  <p>
                    {format(parseISO(meetup.date), `dd 'de' MMMM 'às' HH'h'`, {
                      locale: pt,
                    })}
                  </p>
                </Link>
              </MeetList>
            ))
          )
}

Answer 3

我希望这会对您有所帮助。如果您想了解更多知识，请阅读此blog

 render(){
       const loading = this.state.loading === true;
    return(

<Container>
      <Content>
        <header>
          <p>Meus Meetups</p>
          <button type="button">Novo Meetup</button>
        </header>
        <ul>
          {loading ? (
            <AiOutlineLoading color="#eb3443" size={40} />
          ) : (
            meetups.map(meetup => (
              <MeetList key={meetup.id}>
                <Link to={`/details/${meetup.id}`}>
                  <strong>{meetup.title}</strong>
                  <p>
                    {format(parseISO(meetup.date), `dd 'de' MMMM 'às' HH'h'`, {
                      locale: pt,
                    })}
                  </p>
                </Link>
              </MeetList>
            ))
          )}
        </ul>
      </Content>
    </Container>

)
}