У меня есть этот компонент ниже, и есть ошибка, вызванная функцией changeColor(), которая приводит к сообщению об ошибке:
TypeError: Cannot set property 'color' of undefined
Это единственная ошибка в компоненте. Все остальное работает успешно. Данные JSON извлекаются хорошо, и рендеринг компонентов тоже в порядке. Конечно, это было до того, как я реализовал функцию changeColor(), которая блокировала приложение.
import React, { Component } from 'react'
var data = require('./db.json');
class Cronology extends Component {
constructor(props) {
super(props)
this.state = {
cronology: [],
year: "",
description: ""
}
this.changeColor = this.changeColor.bind(this)
}
componentDidUpdate() {
this.setState({
cronology: data.cronology
})
this.changeColor();
}
changeColor() {
document.querySelectorAll('p').style.color = 'red'
}
render() {
return (
<table>
{
this.state.cronology && this.state.cronology.map(
(i) => {
return (
<tr>
<th className = "column1">• {i.year}</th>
<th className = "column2"><p>{i.description}</p></th>
</tr>
)
}
)
}
</table>
)
}
}
export default Cronology;



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваш метод changeColor() использует document.querySelectorAll('p'), который возвращает коллекцию. Вы должны ориентироваться на конкретный элемент.
document.querySelectorAll('p')[0].style.color = "red" например
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
В качестве дополнения к чужим ответам можно использовать forEach, то есть:document.querySelectorAll('p').forEach(el => el.style.color = 'red');
document.querySelectorAll('p')вернет массив, подобный структуре, вы можете использоватьdocument.querySelectorAll('p')[0].style.color = 'red', чтобы изменить цвет первого цвета p элементов.