Есть много вопросов для обсуждения вашего кода.Чтобы этот ответ был простым и целенаправленным, я просто расскажу о вашем fetch api call и о том, почему вы не видите ничего на переднем крае.
Во-первых, я предлагаю изучить методы жизненного цикла в документации React.Вы можете найти это здесь .Если эта ссылка не работает, просто перейдите на страницу документации React и выполните поиск «Методы LifeCycle».
Причина, по которой я привел это, заключается в том, что вы post вводите свои данные каждый раз, когда компонент обновляется, а не когда пользователь отправляет свое сообщение в чате.Итак, в тот момент, когда пользователь отправляет запрос, вы вызываете функцию onSubmit, которая вызывает setState.Установка состояния обновит пост.Так что в любом месте вашего кода, когда вы вносите изменения в свое состояние или если есть изменения в реквизитах вашего компонента, DOM будет обновляться, и будет запускаться componentDidUpdate, и вы будете публиковать снова.
Поместите свой вызов после API в функцию onSubmit.Обновите свою форму с этого:
submitMessage(e) {
e.preventDefault();
this.setState(
{
chats: this.state.chats.concat([
{
username: "clientUser",
content: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p>,
img: "http://***.jpg"
}
])
},
() => {
ReactDOM.findDOMNode(this.refs.msg).value = "";
}
);
}
до этой обновленной функции onSubmit:
submitMessage(e) {
e.preventDefault();
fetch(
"https://****",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
inputText: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p>
})
}
).then(response => response.json())
.then(parsedJSON => {
parsedJSON.results.map((
user
) => ({
username: "BotResponse",
content: `${user.message}',
img: "http://***.jpg"
}))
}
)
.then(chats =>
this.setState({
chats
})
)
.catch(error => console.log("parsing failed", error));
//for the sake of readability and debugging, you might want to store
that obj in a local variable here and put that variable in place of ...[]
this.setState(
{
chats: [
...this.state.chats,
{
username: "clientUser",
content: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p>,
img: "http://***.jpg"
}
]
},
() => {
ReactDOM.findDOMNode(this.refs.msg).value = "";
}
);
}
Back-end
Вы хотите подтвердить, чтоэто на самом деле сохранение в вашу базу данных (может показаться очевидным, но дважды проверьте, что вы сохраняете так, как вы хотите и , что вы возвращаете правильную информацию. в правильном формате на спине-end. Это может быть, где проблема. Записать ваш ответ на вашу внутреннюю консоль и убедиться, что он возвращает все правильно.
Front-End
Посмотрите, как вы устанавливаете свое состояние в вызове извлечения. Я не совсем уверен, как вы отправляете свои данные, но вот пример вызова после извлечения с использованием axios.
axios.post("http://****", {
data: this.state.data,
more: this.state.more,
etc: { example: "of", object: this.state.obj }
})
.then(response => {
if (response.status === 200) {
//do something with response.data
//this.setState({ data: response.data})
}
});
Там действительно нетНичего больше я не могу предложить. Я не совсем уверен, что вы пытаетесь достичь с источником, который вы предоставили.
Примечание
Есть нескольковещи, которые вы делаете во всем коде, что я не уверен, что вы ннужно сделать.Но я не учел это в этом ответе, потому что я не совсем уверен, каков ваш проект и ваши желаемые результаты.Но это должно помочь с проблемой рендеринга.Если этого не произойдет, посмотрите, как вы устанавливаете свое состояние в fetch api call.
Надеюсь, это поможет.
РЕДАКТИРОВАТЬ
Я не думаю, что вам нужно иметь три .then в вашем вызове API.После того, как вы проанализировали свой JSON, вы можете установить свое состояние там.
РЕДАКТИРОВАТЬ 2
Приведенный выше источник не дал желаемого результата.Вызов API fetch не возвращал данные второму, а затем вызывающему, потому что данные из первого затем вызывают.Вот обновленная функция submitMessage.
submitMessage(e) {
e.preventDefault();
fetch(
"https://****",
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
inputText: <p>{ReactDOM.findDOMNode(this.refs.msg).value}</p>
})
}
).then(response => {
return response.json() //here was the problem, nothing was being returned
})
.then(parsedJSON => {
parsedJSON.results.map(user => ({
username: "BotResponse",
content: user.message, //this shouldn't need to be a string literal
img: "http://***.jpg"
})
)
}
)
.then(chats =>
this.setState({
chats
})
)
.catch(error => console.log("parsing failed", error));
}