Можно ли создать функцию внутри реакции рендеринга, которая содержит оператор if для setState

Question

Итак, мое приложение берет три случайных значения из массива внутри defaultProps, отображает их внутри div в возвращаемом JSX и устанавливает значения трех свойств в состоянии.

Мне нужно изменить состояние в зависимости от того, что это за случайные значения (если random1 === random2 || random2 === random3). Я поместил тернарные операторы внутри console.logs внутри основного div, и они выводят именно то, что я хочу. Однако, когда я пытаюсь создать функцию с оператором if else в том же месте, это не меняет состояние. Я предполагаю, что это проблема с областью действия?

Любая помощь очень ценится.

Это код, который я пытался использовать:

this.state = { 
    fruit1: "?", fruit2: "?", fruit3: "?", 
    rolling: false, win: false, bigWin: false, 
    bankAccount: 0 
  };

...

render (
        <div class="main-div">
          {function winCheck() {
        if (this.state.fruit1 === this.state.fruit2) {
          this.setState({ win: true })
        } else {
          this.setState({win: false})
        }
      }}
      </div>
      )

Answer 1

Вы не можете сделать это внутри рендера. Вы должны создать функцию, которая возвращает истину или ложь в зависимости от значений состояния.

const hasWon = () => {
    const { fruit1, fruit2 } = this.state;
    return fruit1 === fruit2;
}

Затем в рендере:

render (
    <div class="main-div">
      {this.hasWon() ? /* WON COMPONENT */ : /* LOOSE COMPONENT */}
    </div>
  )