反应未定义的道具问题

Question

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

据我了解，defaultProps 仅在 props 对象为空时触发，而不是仅在其 部分 值为空时触发。

例子：

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

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

Answer 1

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

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

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>

        )
    }
}

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