Javascript 点击事件前未定义道具

我是个新手，所以我很抱歉没有回答这个问题。我有两个组件，父组件和子组件。我试图将道具对象传递给子组件，但我在单击后执行此操作，在加载阶段，react抛出我：道具未定义。我知道这是没有定义的，但我不知道我可以忽略这一点或做一些变通。 当我将状态设置为categoryData时，一切都是正确的。我试图检查是否定义了道具，但这并没有改变任何事情。 代码如下：

class Categories extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: []
    };
}
componentDidMount() {
    this.setState({
        data: data.dluga
    })
}
changeCategory(event) {
    event.preventDefault();
    this.setState({
        categoryData: this.state.data[(event.currentTarget.textContent).split(' ')[1]]
    });
}
render() {
    return (
        <div className='categories'>
            <ul>
                {Object.keys(this.state.data).map((item) => {
                    return (
                        <li className='category' key={item}
                                  onClick={this.changeCategory.bind(this)}>
                            <span className='category-item'> {item}</span>
                        </li>
                    )
                })
                }
            </ul>
            <div>
                <CategoryData categoryData={this.state.categoryData}/>
            </div>
        </div>
    );
}}
export default Categories

和子组件：

class CategoryData extends Component {

constructor(props) {
    super(props);
    this.state = {
        categoryData: []
    };
}
componentDidMount() {
    this.setState({
        categoryData:[]
    })
}
render() {
    return (
        <div className='basicData'>
            <h1>General information</h1>
            <ul>
                {(Object.keys(this.state.categoryData).map((item) => {
                    return (
                        <li key={item}><span> {item}</span> : <span>{this.state.categoryData[item]}</span></li>
                    )
                }))
                }
            </ul>
        </div>
    );}}
export default CategoryData;

---

也许你们可以帮我解决这个问题。

在子组件中，你们应该有Object.keysthis.props.categoryData，而不是Object.keysthis.state.categoryData。您并没有在子组件中的任何位置从Received props设置状态categoryData。在ComponentDidMount中，您可以设置空数组的状态。

您只需要在父状态初始化中添加categoryData。因此，您的子组件中有一个空categoryData，它将防止出现异常

class Categories extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        categoryData : [] //add this line
        ^^^^^^^^^^^^^^^^^^
    };
}

在子组件中：

this.props.categoryData=[]在初始加载期间为空数组

{(Object.keys(this.props.categoryData).map((item) => {
                    return (
                        <li key={item}><span> {item}</span> : <span>{this.state.categoryData[item]}</span></li>
                    )
                }))

---

我相信您在Categories组件中遗漏了state对象中的categoryData

class Categories extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        categoryData : []
    };
}
componentDidMount() {
    this.setState({
        data: data.dluga
    })
}
changeCategory(event) {
    event.preventDefault();
    this.setState({
        categoryData: this.state.data[(event.currentTarget.textContent).split(' ')[1]]
    });
}
render() {
    return (
        <div className='categories'>
            <ul>
                {Object.keys(this.state.data).map((item) => {
                    return (
                        <li className='category' key={item}
                                  onClick={this.changeCategory.bind(this)}>
                            <span className='category-item'> {item}</span>
                        </li>
                    )
                })
                }
            </ul>
            <div>
                <CategoryData categoryData={this.state.categoryData}/>
            </div>
        </div>
    );
}}
export default Categories