Question

我将props对象传递给子组件。我遇到的问题是，有时一些嵌套值将为null或未定义，因此我得到了可怕的道具未定义消息Uncaught TypeError: Cannot read property 'xxx' of undefined。

据我所知defaultProps仅在props对象为null时触发，而不是仅当其某些值为空时触发。

示例：

this.state {
    person: { 
        name: "Matt", 
        age: 34, 
        OtherDetails: { city:"", country: "" } 
    }
}

在上面的示例中，有时城市或国家/地区值将为null或未定义。检查这些实例似乎非常困难和费力 - 当道具数据部分且不可靠时，处理这种情况的最佳方法是什么？

Answer 1

如果您的问题建议您只是尝试将对象作为道具传递，然后访问组件中可能不存在的该对象的属性，那么您是否考虑过提供默认值？（这假定您使用的是ES6语法）。

我会在render方法中使用destructuring来访问我将在render方法中使用的每个属性，并为每个项提供一个默认值，如下所示。

class PersonComp extends React.Component {
    render() {
        const {
            name = '',
            age = 0,
            OtherDetails: {city = ''},
            OtherDetails: {country = ''}

        } = this.props.person;

        return (
            <div>
                <div>{name}</div>
                <div>{age}</div> 
                <div>{city}</div>
                <div>{country}</div>
            </div>

        )
    }
}

通过这样做，如果提供的数据中不存在城市或国家，那么将创建它们并为其分配空字符串的值。

反应未定义的道具问题

1 个答案: