Получить значения объекта из .map в React

Question

В настоящее время я работаю с реакцией на чтение и отображение элементов, указанных в файле json. Насколько это все работает нормально. Теперь я хочу отобразить текст в метке флажка, который также должен содержать ссылки без превращения всей метки в ссылку. Для этого я создал json структуру:

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

И чтобы отобразить их бок о бок, я сопоставляю метки json Array

    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'."

Возможно, я просто наблюдаю за чем-то невероятно простым. Помощь была бы хороша!

Ура, м3_

Answer 1

Попробуйте это

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>
})

Answer 2

"labels": [ "Text without a link", { "url": "google.de", "label": "Link text" } ] здесь метки - это массив, который имеет значения типа string и object. Для строк у него не будет свойств url и label. Таким образом, анализируя каждое значение с помощью функции map, вы должны проверить, является ли тип значения объектом или нет. Если это объект, проверьте только URL и метку для него.

Answer 3

Попробуйте это:

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