反应道具中的连字符键名称

时间:2017-12-10 19:38:43

标签: json reactjs react-props

我有一个JSON有效负载,其中包含使用this.props时无法访问的带连字符的键名称

我知道你在JS中无法访问: 带有data: {name-last: dave}符号的.data.name-last无效,data['name-last']确实有效。

我遇到的问题是,当处于反应状态并且使用this.props.data['name-last']时总是返回undefined。

理想情况下,id就像不必更改有效负载(因为id必须在运行中修改它)无论如何都要在props中使用带连字符的键名吗?

这是一个示例数据结构;

{
    generatedTime: "2017-12-08T15:04:16.876Z",
    audits: {
        first-meaningful-paint: {
            score: 85,
            displayValue: "2,370 ms",
            rawValue: 2369.9,
            optimalValue: "< 1,600 ms",
            extendedInfo: {
                value: {}
            },
            scoringMode: "numeric",
            name: "first-meaningful-paint",
            category: "Performance",
            description: "First meaningful paint",
            helpText: "First meaningful paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)."
        },
        speed-index-metric: {
            score: 86,
            displayValue: "2,610",
            rawValue: 2610,
            optimalValue: "< 1,250",
            extendedInfo: {},
            scoringMode: "numeric",
            name: "speed-index-metric",
            category: "Performance",
            description: "Perceptual Speed Index",
            helpText: "Speed Index shows how quickly the contents of a page are visibly populated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/speed-index)."
        }
    }
}

上述内容全部存储在this.props我如何访问this.props.data['first-set-of-data']

我用这个电话: this.props.service.hindi["speed-index-metric"].score

更新,所以我刚刚意识到这些数据无法立即使用。 redux存储只启动一个空白对象。通过异步请求后,我尝试访问的audits对象被拉入。所以我试图访问第一次调用this.props时不存在的道具,这就是应用程序首次运行失败的原因。

如果数据在第一次加载时不存在,

无论如何都要让道具优雅地失败? on我的初始状态是否需要在获取数据后匹配完整的结构化状态?

0 个答案:

没有答案