ReactJS: данные из Express отображаются в виде чисел вместо JSON

Question

Я пытаюсь отправить строки с моего Express сервера в виде объекта JSON и отобразить эти JSON объекты в моем приложении React.

Сейчас по какой-то причине он просто отображает число для каждого из 25 элементов:

0123456789101112131415161718192021222324

В моем Express приложении image_url и post_url - это строки. Это всегда возвращает строки:

  const image_url = imageData.data[0].media.image.src;
  const post_url = imageData.data[0].target.url;
  globalImageList.push({
    image: image_url,
    post: post_url
  });
}

Также в Express. Это отправляет объект в приложение React при посещении URL-адреса этой функции, то есть «/ api».

if (resultCount === processList.length) {
  res.send(JSON.stringify(JSON.parse(globalImageList)));

В моем приложении React мой компонент начинается с состояния, в котором apiResponse является пустой строкой:

this.state = {
  apiResponse: ""

Данные извлекаются из моего приложения Express с использованием fetch() который называется в componentDidMount. Я сохраняю эти JSON данные в поле apiResponse:

callAPI() {
    fetch('/api/getList')
        .then(res => res.json())
        .then(res => this.setState({ apiResponse: res }))
}

То, как я отображаю это состояние, выглядит так, как показано, и оно не отображает URL, оно просто перечисляет объекты:

render() {
  return(
    <div className="App">
      <p className="App-intro">{Object.keys(this.state.apiResponse).map(i => i)}</p>
    </div>
  )
}

Если я напишу его как {(this.state.apiResponse) .map (i => i)}, я получу ошибку, что apiResponse не является функцией.
Если я напишу его как {this.state .apiResponse} Я получаю сообщение об ошибке: «Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {image, post}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив."

Я также обнаружил, что могу изменить .then (res => res. json ()) на .then (res => res.text ()) и отображать только {this.state.apiResponse} текст из всех строк будет отображаться на экране, но мне нужно контролировать отдельные элементы в формате JSON (я считаю).

Answer 1

Здесь есть несколько проблем - одна из них заключается в том, что компонент неправильно обрабатывает / отображает «этап загрузки» последовательности выборки данных (ie, точка, в которой fetch() занята загрузкой данных из сервер).

Эта проблема обычно решается путем отображения пользователю сообщения о загрузке во время выполнения fetch(), а не попытки визуализации компонента, как если бы данные ответа уже присутствовали. Простым решением в вашем случае было бы внести следующие изменения:

callAPI() {
    /* Leave as is - use res.json() to parse response to JSON object */
    fetch('/api/getList')
        .then(res => res.json())
        .then(res => this.setState({ apiResponse: res }))
}

render() {
  /* Extract apiResponse object (optional) */
  const { apiResponse } = this.state;

  /* Assume that while apiResponse matches initial state, the fetch
  request is still busy, so render a loading message */
  if(!apiResponse) {
      return <p>Loading</p>
  }

  /* Otherwise, we assume the apiResponse is populated with data from
  the sever and proceed to enumerate and render */
  return(
    <div className="App">
      <p className="App-intro">
      {/* Enumerate values of response, render as strings */}
      {Object.values(apiResponse).map((value, index) => 
          (<p key={index}>{ JSON.stringify(value) }</p>)
      )}
      </p>
    </div>
  )
}

Обратите также внимание, что перечисление больше Object.values(), а не Object.keys() - это позволяет сопоставить фактические значения объекта apiResponse для отображаемого результата (а не числовые ключи). Надеюсь, что это указывает на правильное направление: -)