开发者问题收集

ReactJS - 未定义元素

2019-06-05
573

我有以下组件,并且 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;
2个回答

您的 changeColor() 方法正在使用 document.querySelectorAll('p') ,它返回一个集合。您必须定位特定元素。

document.querySelectorAll('p')[0].style.color = "red" 例如

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

JohnSnow
2019-06-05

作为对其他人答案的补充,您可以使用 forEach ,即:
document.querySelectorAll('p').forEach(el => el.style.color = 'red');

Matin Sasan
2019-06-05