ReactJS — неопределенный элемент

У меня есть этот компонент ниже, и есть ошибка, вызванная функцией 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;
document.querySelectorAll('p') вернет массив, подобный структуре, вы можете использовать document.querySelectorAll('p')[0].style.color = 'red', чтобы изменить цвет первого цвета p элементов.
Codesigner 05.06.2019 07:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
339
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ваш метод 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');

Другие вопросы по теме