使用redux访问嵌套道具

Question

我是Redux的新手。我正在尝试访问我的零售商道具中的嵌套数据。我希望能够访问零售"名称"，并使用原型将道具验证为字符串。当我尝试访问渲染中的"名称"时，它会破坏应用程序。我们Redux有更好的方法吗。

class MyPage extends React.Component {
componentDidMount() {
const { id } = this.props;
this.props.getRetailer(id);
}
render() {
const { retailer } = this.props.retailer;
const { name } = this.props.retailer && this.props.retailer.retailer;
return (
<div>
<Form
name={name}
/>
</div>
);
}
}

const mapStateToProps = (state) => ({
retailer: state.retailer
});
export default connect(mapStateToProps, {
getRetailer
})(MyPage);

Answer 1

这里的问题是，当零售商不在时，this.props.retailer && this.props.retailer.retailer;可能返回null，因此它将尝试从null解析名称，这将引发错误

你可以像一样使用带回退的析构函数

const { retailer } = this.props.retailer || { retailer: {} }; 
const { name } = retailer || {};

以上将处理this.props.retailer为空或未定义以及this.props.retailer.retailer为空或不定义的情况