Поток состояний для рендеринга

Question

Я пытаюсь передать состояние функции в рендере, поэтому при каждом нажатии я получаю результат. Я проверяю, передано ли состояние в console.log, и я получаю Undefined, почему? (Изменить: minNum и maxNum будут меняться со временем, поэтому я хочу рассматривать их как состояние, а не параметры).

class Generator extends React.Component {
    constructor (props) {
        super(props)
        this.state = { 
        onView: '0',
        minNum: 0 ,
        maxNum: 100
      } 
    }

  render() {

    const { minNum, maxNum } = this.state;

    const btnClick = (minNum, maxNum) => {
      console.log(minNum);
     }

  return (
    <div className="container">
    <Instructions />
    <Range 
      max={this.state.maxNum} 
      min={this.state.minNum} 
      />
    <Generate currentClick={btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

Answer 1

Не определяйте функции внутри render, так как это ухудшит производительность и может легко вызвать ошибки рендеринга. Что вы можете сделать, так это напрямую получить доступ к значениям состояния при определении обратного вызова onClick:

btnClick = () => {
    const { minNum, maxNum } = this.state;

    console.log(minNum);
  };

  render() {
    return (
      <div className="container">
        <Instructions />
        <Range max={this.state.maxNum} min={this.state.minNum} />
        <Generate currentClick={this.btnClick} />
        <View show={this.state.onView} />
      </div>
    );
  }

Answer 2

Просто переместите функцию за пределы рендера, так как это вызывает проблемы с производительностью, и передайте minNum в качестве параметра внутри функции стрелки при щелчке следующим образом:

<Generate currentClick={() => this.btnClick(minNum)}

Answer 3

Поправьте меня, если я ошибаюсь, но, возможно, это было бы более простым решением

const Generator = () => {
  const [onView,setView] = useState("0")
  const [minNum,setminNum] = useState(0)
  const [maxNum,setmaxNum] = useState(100)

  const btnClick = (minNum, maxNum) => {
    console.log(minNum)
  }
  return (
    <div className="container">
      <Instructions />
      <Range max={maxNum} min={minNum} />
      <Generate currentClick={() => btnClick(minNum)} />
      <View show={onView} />
    </div>
  )
}

export default Generator