Блог

Главная - Вопросы по программированию - Невозможно отобразить состояние, но можно утешить.зарегистрируйте это

Невозможно отобразить состояние, но можно утешить.зарегистрируйте это

#reactjs

Вопрос:

У меня есть состояние, определенное следующим образом:

   state = {
    items: [
      {id: 0, value: 0},
      {id: 1, value: 0},
    ],
  };

когда я console.log(this.state.items[0].id) в конструкторе, я получаю правильное значение.

Но когда я пытаюсь сделать это так:

 render() {
    return (
      <div>
        <table>
        <tr>
      <th id="d0" onClick={(e)=>this.onClick(e)}>{this.state.items[0].id}</th>
    ....

Там написано «Не удается прочитать свойство ‘0’ неопределенного».

Происходит ли рендеринг до инициализации состояния и, следовательно, не определен при попытке рендеринга?

 class App extends React.Component {
    /**
     * @param {object} props
     */
    state = {
        items: [
            { id: 0, value: 0 },
            { id: 1, value: 0 },
        ],
    };

    constructor(props) {
        super(props);
        console.log(this.state.items[0].id);
    }

    render() {
        return (
            <div>
                <table>
                    <tbody>
                        <tr>
                            <th id="d0" onClick={(e) => this.onClick(e)}>th</th>
                            <th id="d1">h</th>
                        </tr>
                    </tbody>
                </table>
            </div>
        );
    }

    onClick(e) {
        this.setState({ day0: 6 });
    }
}

ReactDOM.render(<App />, document.querySelector('.react')); 
 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Комментарии:

1. @Опубликовано определенное качество

2. Я не могу воспроизвести проблему. Похоже, что он будет отображаться правильно без ошибок. Смотрите фрагмент в прямом эфире.

3. @CertainPerformance Я не пытаюсь отобразить «th», я пытаюсь отобразить этот.state.items[0].id

Ответ №1:

Ваше состояние должно быть задано в вашем конструкторе

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        items: [
            { id: 0, value: 0 },
            { id: 1, value: 0 },
        ]
    }
  }
  render() {
    return (
        <div>
          <table>
            <tr>
              <th id="d0" onClick={(e)=>this.onClick(e)}>{this.state.items[0].id}</th>
            </tr>
           </table>
         </div>

    );
  }
}

Ответ №2:

Вы неправильно инициализируете состояние. Состояния должны быть инициализированы внутри конструктора в компонентах на основе классов. Пожалуйста, обновите инициализацию состояния следующим образом :

 class App extends React.Component {
    /**
     * @param {object} props
     */
constructor(props) {
    super(props);
    this.state = {
        items: [
            { id: 0, value: 0 },
            { id: 1, value: 0 },
        ],
    };
}

render() {
    return (
        <div>
            <table>
                <tbody>
                    <tr>
                        <th id="d0" onClick={(e) => this.onClick(e)}>{this.state.items[0].id}</th>
                        <th id="d1">h</th>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

onClick(e) {
    this.setState({ day0: 6 });
    }
}

ReactDOM.render(<App />, document.querySelector('.react'));
Метки: ,