从 React 中的 .map 获取对象的值答案

【问题标题】：Get values of object from .map in React从 React 中的 .map 获取对象的值
【发布时间】：2020-08-06 11:46:53
【问题描述】：

我目前正在使用 react 来读取和显示 json 文件中给出的元素。就这一点而言，一切正常。现在我想在一个复选框的标签中显示一个文本，该复选框也应该能够包含链接，而无需在链接中打开整个标签。为此，我制作了这个 json 结构：

       "labels": [
          "Text without a link",
          {
            "url": "google.de",
            "label": "Link text"
          }
        ]

为了并排显示这些，我将映射到 json 数组“标签”

    labels: Array<Object>;

    labels.map(el => {
      if (isString(el))
        return el;
      else
        return <Link href={el['url']} color="inherit">{el['label']}</Link>
    })

但我无法访问 el['url'] 或 el['label']。它抛出：

"Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Object'."

可能我只是在监督一些令人难以置信的简单事情。帮助会很好！

干杯， m3_

【问题讨论】：

labels: Array<Object>; -> labels: Array<string | {url: string; label: string}>;?
应该是el[1].url和el[1].label
@TomFinney 谢谢！那解决了它。我忘了在标签中指定对象。

标签： javascript json reactjs object mapping

【解决方案1】：

试试这个：

return <Link href={el.url} color="inherit">{el.label}</Link>

【讨论】：

【解决方案2】：

试试这个

var data = {
    "labels": [
        "Text without a link", {
            "url": "google.de",
            "label": "Link text"
        }
    ]
}

const links = data.labels.map(item => {
    if(isString(item)) {
        return item
    }

    const { url, label } = item
    return <Link href={ url } color="inherit">{ label }</Link>
})

【讨论】：

【解决方案3】：

"labels": [ "Text without a link", { "url": "google.de", "label": "Link text" } ] 这里，labels 是一个数组，其值类型为字符串和对象。对于字符串，它不会有 url 和 label 属性。因此，在使用 map 函数解析每个值时，您必须检查值的类型是否为对象。如果它是一个对象，那么只检查它的 url 和标签。

【讨论】：