Question

反应未定义的道具问题

2018-04-08

1157

reactjs

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

据我了解， defaultProps 仅在 props 对象为 null 时触发，而不是在其某些值为 null 时触发。

示例：

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

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

Answer 1

如果正如您的问题所暗示的那样，您只是想将一个对象作为 prop 传递，然后访问组件中可能不存在的该对象的属性，那么您是否考虑过提供默认值？（假设您使用 ES6 语法）。

我将在 render 方法中使用解构来访问我将在 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>

        )
    }
}

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