Question

在$.each(items, function (index) { $('#newLocation') .append($("<option></option>") .attr("value", JSON.stringify(items[index])) .text(items[index].Name)); }); $("#newLocation").change(function(e) { var select = e.target; alert(JSON.parse(select.value).ACrush); });中，我传递了许多变量。最佳做法似乎指向在调用render()之前执行以下操作：

return <div>...etc</div

这一切都很好，但是我有一个特定的对象，我需要获取嵌套在深处的那一个。而不是让对象去做：

const {
        products: mainProducts,
        parent,
        getProductsByOffset,
        offset,
        count,
        formOnChange,
        isGettingMissingProducts
    } = this.props

我将如何很好地提取它。我认为，按照我的做法const assignProducts = this.props.parent.props.input.values

可以做到这一点，并且是最佳做法

Answer 1

我确实认为您的const assignProducts = this.props.parent.props.input.values看起来比其他任何方法都要好，但是如果您要继续进行结构分解以提取该嵌套属性，则可以使用以下语法：

const {
  products: mainProducts,
  parent,     // if you only need the `assignProducts`, remove this line
  parent: { props: { input: { values: assignProducts }}},
  getProductsByOffset,
  offset,
  count,
  formOnChange,
  isGettingMissingProducts
} = this.props

请注意，您可以同时提取parent属性（如果需要）和提取parent内部的属性。但这看起来比您的原始代码IMO丑陋。

Answer 2

根据最佳实践，深层嵌套对象被认为是脆弱的，因为如果该深层嵌套结构在任何地方发生更改，依赖于该深层嵌套结构的代码都会破坏。

有许多避免深层嵌套对象的技术。一种是将您的数据“标准化”为一组平坦或接近平坦的列表。请参阅Redux文档中的"Normalizing State Shape"。

如果必须使用嵌套数据，则假设数据来自Redux状态，您仍然可以通过创建 selector 函数（在{中调用{1}}。通常，您将选择器的代码放在化简器的附近（可能与化简器在同一文件中）。通过更改变径器来更改redux状态形状时，然后更新选择器以反映新形状。显示组件代码和mapStateToProps不受这些更改的影响，并且将继续工作而无需更改代码。

您的选择器如下所示：

mapStateToProps()

然后您的export const Selectors = { getInputValues: state => state.parent.props.input.values }如下所示：

mapStateToProps()

在render中干净地分配嵌套的this.props const

2 个答案: