Доступ к свойству из массива объектов, хранящихся в состоянии в React

Question

Я работаю с ReactJS над проектом и использую KnexJS для доступа к базе данных.Я хотел бы хранить и использовать извлекаемые мной объекты JSON в состоянии компонента как что-то вроде следующего.

this.setState({tutors: tutors}) //Retrieval from database after promise

и затем получить доступ к их свойствам следующим образом:

this.state.tutors[0].email this.state.tutors[0].firstname

Однако, когда я пытаюсь это сделать, я получаю следующую ошибку

TypeError: Cannot read property 'email' of undefined

Я проверил console.log, а также использовал JSON.stringify, чтобы определить, получены ли объекты к тому времени, когда они мне нужны.И похоже, что они есть.Я просто не могу получить доступ к их свойствам из штата.

Могу ли я что-нибудь сделать с этим?Или мне нужно извлекать их из БД по одному?

Answer 1

в первом жизненном цикле у вас нет данных в this.state.tutors [0], по этой причине сначала проверьте, готов ли this.state.tutors [0] или нет

if(this.state.tutors[0])
 {
   var data=this.state.tutors[0];
   data.push('your data');
   this.setState({tutors:data})
 }

Answer 2

Мне кажется, вы пытаетесь получить первый элемент массива. this.state.tutors[0].email действительно ли репетиторы представляют собой массив, который может предоставить формат данных, которые вы консольно записали, как вы заявили. Это, вероятно, должно быть в комментарии.раздел, но у меня менее 50 представителей, поэтому я не могу комментировать.

Answer 3

вы должны проверить первых репетиторов.если вы получаете репетиторов массив, то вы можете получить доступ к его первому элементу.

if(this.state.tutors[0]) {
   console.log("first element of tutors array", this.state.tutors[0].email)
   // anything you can acccess now of this element
}

и назначить первых репетиторов как пустой массив в состоянии.

state = {
    tutors: []
}

Answer 4

Это может происходить, потому что в данный момент ваш код пытается получить данные из состояния, данные еще не там - хотя, возможно, они будут добавлены позже.Это то, что случается довольно часто, по моему опыту.Вы, вероятно, должны проверить, что объект существует, прежде чем пытаться получить доступ к свойству на нем - и вернуть null или undefined в случае, если он не существует:

this.state.tutors[0] ? this.state.tutors[0].email : null

EDIT (в ответ на дополнительные примеры кода):

1. Предполагая, что ваша функция извлечения работает нормально и добавляет извлеченные данные в состояние (я бы использовал forEach вместо map, чтобы поместить элементы в массив, или просто отобразить полученный массив и добавить, чтонапрямую в состояние, без промежуточного массива / переменной / толчка - но я думаю, что ваш код должен работать) ...
2. Проблема связана с методом рендеринга, поскольку, когда компонент первоначально отображает данныееще не в состоянии, и поэтому вы передаете пустой массив компоненту TutorTable, который, вероятно, в свою очередь вызывает ошибку, которую вы видите.
3. Данные добавляются в состояние позже, но на этом этапеошибка при начальном рендеринге уже произошла.
4. Эту проблему можно решить, выполнив условную визуализацию TutorTable, только когдаДанные добавляются в состояние:

<div className="col-7">
  <h3> My Tutors </h3>
  {this.state.tutors.length > 0 && <TutorsTable tutors={this.state.tutors} />}
</div>

если вы console.log из this.state.tutors в методе render (), вы должны увидеть в консоли пустой массив ([]), возвращенный при первоначальном рендеринге, а затем массив, заполненный данными, когда компонент перезапустится.-отдает, когда данные добавляются в состояние.

Надеюсь, это поможет.