Получение содержимого JSON при вызове Fetch API Post
Я новичок в React, и у меня есть пользовательский интерфейс чата, в котором я пытаюсь протестировать вызов API из службы. Предположим, что сам вызов имеет правильные параметры, и даже если я не хочу видеть ответ JSON с ошибкой, я просто получаю пустое сообщение в чате в качестве ответа на сообщение пользователя. Вызов работает через приложение Postman в Chrome, но при попытке присвоить результат вызова var в реакции он не представляет значение ответа JSON при попытке отправить сообщение через чат пользовательского интерфейса.
Это функция, сообщение пользователя передается в эту функцию, и сразу после этого должен появиться ответ через полученный запрос API:
submitMessage(e) {
e.preventDefault();
var s = fetch('https://***', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': '****',
},
body: JSON.stringify({ inputText: 'hi' })
});
this.setState({
chats: this.state.chats.concat([
{
username: "newUser",
content: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p>
},
{
username: "responsePlace",
content: s
}
])
});
}
Спасибо, как мне тогда отправить ответ через поле содержимого пользователя "reponsePlace"? при добавлении .then (response => response.json ()) в выборку и оставлении остальных без изменений возникает ошибка: «Инвариантные объекты нарушения недействительны в качестве дочерних элементов React (найдено: [object Promise]). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. ". Это при назначении обычной текстовой строки для var s, представляет сообщение нормально.
Если вы сделаете fetch(...).then(r => r.json()).then(r => console.info(r)), как будет выглядеть ответ (r)?
@wdm Спасибо. Я получил требуемый JSON. Мне нужно извлечь значение поля с именем «message» и поместить его в поле содержимого имени пользователя «reponsePlace». Как я могу это сделать ? Я пробовал кое-что, но в итоге получились ошибки ..
Вам нужно будет перебрать массив chats, чтобы найти нужный объект. Примерно так: jsfiddle.net/wfqh9r1e
Ответы 1
fetch - это обещание javascript, поэтому его необходимо разрешить с помощью then.
fetch(...)
.then(response => response.json()) // resolves json content of the response
.then(data => console.info(data)) // your actual data as a javascript object
.catch(ex => console.info(ex)) // exception handler in case anything goes wrong in the fetch
Подробнее о fetch api: получить примеры API
Подробнее о обещаниях: Обещания
Спасибо, как мне тогда отправить ответ через поле содержимого пользователя "reponsePlace"? при добавлении .then (response => response.json ()) в выборку и оставлении остальных без изменений возникает ошибка: «Инвариантные объекты нарушения недействительны в качестве дочерних элементов React (найдено: [object Promise]). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. ". Это при назначении обычной текстовой строки для var s, представляет сообщение нормально.
Fetch возвращает обещание,
thenдолжен что-то с ним делать.fetch(...).then(response => /* do something with response */)