Как объединить массив в запросе на выборку с разными типами переменных в React?

Я работаю над компонентом React, который запрашивает данные через выборку и получает в качестве ответа объект JSON, который состоит из значений, которые являются строками или массивами строк.

Я хочу отобразить каждый из ключей и значений в списке. Если значение является массивом, я хочу преобразовать его в строку, разделенную точками с запятой. Однако всякий раз, когда я пытаюсь преобразовать массив в строку с помощью метода .join () во время процесса сопоставления, сопоставленные элементы никогда не отображаются. Если я удалю метод .join () из сопоставления, константа будет отображаться нормально.

Почему я не могу использовать метод .join () в процессе сопоставления данных, возвращаемых из выборки? Или я еще что-то не так делаю? Я не вижу ошибок в консоли, которые указывали бы на проблему в синтаксисе.

Похоже, это также применимо к отображению в функции отображения (в отличие от использования соединения).

class Record extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    }
  }
  componentDidMount() {
    fetch('http://127.0.0.1:9200/_index/_doc/1')
      .then(res => res.json())
      .then(json => this.setState({data: json._source}))
  }
  render() {
    const data = this.state.data
    const record = Object.keys(data).map((f, i) => {
      return <li key={i}>{f} : {typeof data[f] === 'object' ? data[f].join('; ') : data[f]}</li>
    })
    return (
      <ul>
        {record}
      </ul>
    )
  }
}

РЕДАКТИРОВАТЬ: пример ответа с данными:

{"foo": "строка", "bar": ["baz", "fred"], "anotherfield": "anotherstring"}

который в идеале должен отображаться как:
foo: string
bar: baz; Фред
anotherfield: anotherstring


reactjs fetch-api
person crkm    schedule 07.01.2019    source источник
comment
Не могли бы вы привести небольшой пример того, как может выглядеть data? Также data массив или объект?   -  person Henry Woody    schedule 07.01.2019
comment
Поскольку мы не знаем, что содержит data, мы мало чем можем помочь. Я тестировал data=[['foo', 'bar'], 'baz'] и получил ожидаемые результаты, поэтому нам нужно знать, как выглядит ваш data.   -  person Carl Markham    schedule 07.01.2019
comment
обновлено: ответ данных является объектом. Пример находится в исходном теле сообщения.   -  person crkm    schedule 07.01.2019
comment
Nit: вы должны использовать Array.isArray, чтобы проверить, является ли что-то массивом, а не typeof === 'object'   -  person Matthew Herbst    schedule 07.01.2019
comment
@MatthewHerbst, похоже, это исправление. Я думаю, что произошло то, что некоторые из значений были нулевыми, что вернуло true для typeof === 'object', но поскольку нулевые значения не могут быть объединены, это нарушало сопоставление. Спасибо.   -  person crkm    schedule 07.01.2019

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключалась в том, что некоторые из значений, возвращаемых из данных, были нулевыми, что возвращает «истину» для typeof === «объект». Поэтому мне нужно было использовать вместо этого Array.isArray (data [f]).

person crkm    schedule 07.01.2019