Javascript 将JSX从组件方法返回到渲染方法

我还没有反应过来。我试图在我的类组件下的另一个方法中定义的条件下呈现jsx，如下所示：

isWinner = () => {
 let userVotesCount1 = this.state.user1.userVotesCount;
 let userVotesCount2 = this.state.user2.userVotesCount;
 if (userVotesCount1 > userVotesCount2) {
   userVotesCount1++;
   this.setState({ user1: { userVotesCount: userVotesCount1 } });
   return (
     <h3>Winner</h3>
   );
 }
 userVotesCount2++;
 this.setState({ user2: { userVotesCount: userVotesCount2 } });
 return (
   <h3>Loser</h3>
 );}

我在render方法中调用这个方法

<Dialog
   open={open}
   onRequestClose={this.onClose}
      >
 <div>
   <isWinner />
 </div>
 </Dialog>

---

已经尝试对{=>this.isWinner}使用replace，但我从未从该方法获得返回。我做错了什么？因为我处理的是状态，所以我不知道如何使用外部函数。由于某些原因，此函数从未被调用。请帮忙

你就快到了。您要做的是使用该方法设置标志，然后使用render方法中的标志进行有条件渲染

constructor(props) {
  ...
  this.state = {
    isWinner: false,
    ...
  }
}
isWinner() {
  ...,
  const isWinner = __predicate__ ? true : false;
  this.setState({
    isWinner: isWinner
  });
}

render() {
  const { isWinner } = this.state;
  return isWinner ? (
    // jsx to return for winners
  ) : (
    // jsx to return for lossers
  )
}

---

这个可能的副本实际上渲染了JSX，但是不管我选择什么，它只渲染了loser。此外，该州有2个用户，他们身上还有2个属性。我知道setState是异步的，在这段代码中有很多。难道不应该有一个暂停或什么的吗。如果是这样的话，怎么做呢？你已经有太多的事情要做了，而示例中显示的内容却不足以在不为你编写代码的情况下给你一个好的答案。你为什么不把你的项目做一个链接呢。如果到那时你还没有得到帮助或解决问题，我明天会帮你调试它。就在那里。我尝试了你的解决方案，但我认为这与setState方法有关。尽管我的逻辑有问题。一切都解决了，谢谢你的帮助。