ReactJS 中三元运算符的问题

Question

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

我试过使用 loading={loading ? 1 : 0} 在 Container 内但没有任何变化...

<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

我以前遇到过这个问题。不确定这是否适合您，但对我有用的是像这样配置它：

{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 2

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

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>

)
}

ReactJS 中三元运算符的问题

Problems with ternary operator in ReactJS

reactjs

redux

redux-saga