Question

我对React很新，所以对于nooby问题我很抱歉。我有两个组成部分，父母和孩子。我尝试将props对象传递给子组件，但是我在点击后执行此操作，并且在加载阶段反应会抛出我：props未定义。我知道这没有定义，但我不知道我可以忽略这个或做一些解决方法。当我将状态设置为categoryData时，一切都是正确的。我试图检查是否定义了props，但这没有改变任何东西。这是代码：

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;

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

Answer 1

您只需在父状态初始化中添加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>
                    )
                }))

Answer 2

在子组件中，您应该Object.keys(this.props.categoryData)而不是Object.keys(this.state.categoryData)。您没有在子组件中的任何位置从已接收的道具设置状态categoryData。在ComponentDidMount中，设置空数组的状态。

Answer 3

我相信你错过了categoryData组件中状态对象中的Categories。

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

点击事件之前道具未定义

3 个答案: