Блог

Главная - Вопросы по программированию - Ответ Reactjs Rest API декодирует JSON

Ответ Reactjs Rest API декодирует JSON

#reactjs #json

Вопрос:

Я получаю ответ rest API от URL-адреса API. Но мне нужно расшифровать некоторые части ответа от JSON на объект.Вот ответ.

введите описание изображения здесь

Здесь вы можете видеть price , и service_timespan эти две вещи должны быть в JSON.parse(). Так что эти значения можно использовать.С другой стороны, я не могу их использовать.

вот мой код

 { services.length > 0 amp;amp; services.map(( service, index ) => (
<tr key={service.id} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{service.service_name}</td>
    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{service.service_cat_id}</td>
    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{service.price.base_price.amount}</td>
    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{service.service_timespan.duration.length}</td>
    <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" className="text-indigo-600 hover:text-indigo-900">
        Edit
    </a>
    </td>
</tr>
))
}

Вот я и добираюсь cannot read property amount of undefined

Комментарии:

1. Вы, кажется, знаете о JSON.parse том, чтобы анализировать JSON, так что же вам мешает это сделать?

2. Я думаю, что вас сбивает с толку то, что вы получаете строку JSON, которая включает поля, значения которых также являются строками json. Таким образом, после анализа внешнего объекта эти значения по-прежнему являются строками, которые необходимо JSON.parse обрабатывать отдельно.

3. @rayhatfield Точно, вы правы. Когда я использую функцию map, мне также нужно JSON.также проанализировать эти строки json. Но я не могу этого понять

Ответ №1:

 { (services || []).map(s => {
    ...s, 
    price: JSON.parse(s.price),
    service_timestamp: JSON.encode(s.service_timestamp)
  })
   .map(( service, index ) => ( your component) }

Но если вы можете, избегайте помещать это в свой компонент, так как это будет оцениваться при каждом рендеринге. Выполните синтаксический анализ в службе Api, если у вас есть, когда вы получите ответ или в useMemo

Метки: