Я использую rest-api для своего проекта, и когда я запускаю код, метод GET работает, но каждый раз, когда я добавляю сообщение с помощью метода POST, данные создаются в базе данных, но не отображаются в приложении. Мне нужно перезапустить приложение, чтобы увидеть последнее сообщение.
Предполагается, что это приложение для живого чата, и я не уверен, что моя проблема связана с внутренним или внешним интерфейсом. Когда я извлекаю все методы получения и публикации, он работал нормально и отображал отправку нового сообщения. Однако, когда я извлекаю данные из базы данных restapi, сообщения отображаются только при обновлении sh страницы.
main. js
class MessagePanel extends Component {
state={
messages:[],
usernames:[]
}
componentDidMount(){
axios.get('http://localhost:8888/restapi/messages')
.then(response =>{
this.setState({messages: response.data.data[0].messages});
console.log(response)
})
}
sendMessage=(mes)=>{
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
const data={
username: this.props.username,
text: mes
};
axios.post('http://localhost:8888/restapi/messages', data,{
headers: headers
})
.then(response=> {
console.log(response)
})
};
createUsers(){
this.setState({usernames:
[...this.state.usernames, this.props.username]})
}
render()
{
return (
<div className="MessagePanel">
<Layout/>
<SidePanel users={this.state.usernames} />
<DisplayMessages messages={this.state.messages} username={this.props.username} />
<MessageBox sendMessage={this.sendMessage} username={this.props.username}/>
</div>
);}
}
export default MessagePanel;
DisplayMessage. js
class DisplayMessages extends Component {
//will stop auto scrolling down when you send a message
componentWillUpdate=()=>{
const node=ReactDOM.findDOMNode(this)
this.shouldScrollToBottom = node.scrollTop +node.clientHeight + 100 >= node.scrollHeight
}
//Auto scrolls when some client messages
componentDidUpdate=()=>{
if(this.shouldScrollToBottom) {
const node= ReactDOM.findDOMNode(this)
node.scrollTop=node.scrollHeight
}
}
render(){
return (
<div className="DisplayMessage">
<div className='message-container'>
{this.props.messages.map(message => {
return(
<Message key={message.id} text={message.text} username={message.username} />
)
})}
</div>
</div>
);}
}
export default DisplayMessages;
Сообщение. js
const message =(props) => {
let messageClass = 'message-row';
if (props.isMyMessage) {
messageClass += ' you-message';
} else {
messageClass += ' other-message';
}
return (
<div className='messageClass'>
<div className='messagedata'>
<div className='userid'>{props.username}</div>
<div className='textmessage'>{props.text}</div>
</div>
</div>
);
}
export default message;