Почему мой компонент класса не отображается правильно?

#reactjs #render

Вопрос:

Я занимаюсь этим уже некоторое время и никак не могу прийти в себя. Я чувствую себя такой глупой. Кто-нибудь может сказать мне, что случилось?

Журнал консоли работает в настоящее время, и консоль.в журнале объекта указывается, что состояние было изменено с ложного на истинное.

 class ChoiceBar extends React.Component {
  constructor() {
    super();
    this.state = {
      handleFirstQuestion: false,
    };
    this.handleFirstQuestion = this.handleFirstQuestion.bind(this)
  }

  handleFirstQuestion() {
    console.log("Start Rendering First Question")
    this.setState({handleFirstQuestion: true}, () => {console.log(this.state);
    });
  }

  render() {
    return (
      <div>
        <center>
            <div>
              <button onClick={this.handleFirstQuestion.bind(this)}> Start! </button>
              <p> </p>
              {this.state.handleFirstQuestion
                ? <FirstQuestionBox />
                : null
              }
            </div>
        </center>
      </div>
    )
  }
}

1. <кнопка onClick={this.handleFirstQuestion}> Запуск! </кнопка> попробуй это, братан

2. вы не должны устанавливать имя и функцию с таким же именем, как это, это выглядит запутанно :

3. В чем именно заключается проблема рендеринга? Скопировано в codesandbox , и код в основном работает (удалена вторая this привязка).

4. Спасибо Дрю и Ану, удаление этой второй привязки действительно помогло. Я проверил твой код и ящик, и да, это сработало! Я исключил это из своего вопроса, но «Первый вопрос» должен быть еще одним компонентом. Добавление «const FirstQuestionBox», но в моем полном коде с компонентом 2-го класса он не отображается… это может быть более широкой проблемой с моей стороны. Тем не менее, спасибо за вашу помощь!!

5. Ну да, мне действительно нужно было заглушить этот компонент, так как он не был включен в ваш фрагмент. Как думаете, вы могли бы создать работающий codesandbox, который воспроизводит возникшую у вас проблему, которую мы можем проверить и отладить в реальном времени? Не стесняйтесь раскошелиться на песочницу, которой я поделился, и добавить свой дополнительный код.

Ответ №1:

Во — первых, вы связываете функцию дважды, один раз в конструкторе и один раз в обработчике событий onClick. Компонент реквизита второго прохода в конструкторе и супер

 constructor(props) {
    super(props);
    this.state = {
      handleFirstQuestion: false,
    };
    this.handleFirstQuestion = this.handleFirstQuestion.bind(this)
  }

return (
  <div>
    <center>
        <div>
          <button onClick={this.handleFirstQuestion}> Start! </button>
          <p> </p>
          {this.state.handleFirstQuestion
            ? <FirstQuestionBox />
            : null
          }
        </div>
    </center>
  </div>
)

Ответ №2:

Я не думаю, что вы экспортируете компонент класса

напишите это после компонента класса

 export default ChoiceBar;

вероятно, вам следует использовать функции aero и использовать хук состояния вместо компонента класса

например:

 const ChoiceBar = () => {
    const [handleFirstQuestion, setHandleFirstQuestion] = useState(false)
}