React not re-rendering after state change - reactjs

Question

import React, {Component, Fragment} from 'react'
import axios from 'axios'
import PropTypes from "prop-types";
import { connect } from 'react-redux'
import { postComment } from "../../../actions/comments"
import './styles.scss'
export class Comments extends Component {
constructor(props) {
super(props)
this.state = {
comment: "",
author: null
}
}
static propTypes = {
postComment: PropTypes.func.isRequired
};
componentDidMount() {
axios
.get(`/api/auth/user`)
.then(res => {
const author = res.data.id
this.setState({author});
})
.catch(err => console.log(err));
}
onSubmit(e) {
e.preventDefault();
const variables = {
content: this.state.comment,
post: this.props.post.id,
author: this.state.author
}
this.props.postComment(variables)
this.setState({content: ""});
}
onFieldChange(fieldName) {
return function (event) {
this.setState({[fieldName]: event.target.value});
}
}
render() {
return (
<Fragment>
<div class="input">
<form style={{ display:'flex'}} onSubmit={e => this.onSubmit(e)}>
<div class="input-group">
<input
class="form-control rounded-corner"
style={{width: '100%', borderRadius: '5px'}}
onChange={this.onFieldChange('comment').bind(this)}
value = {this.state.comment}
placeholder="Leave a comments"
/>
<span class="input-group-btn p-l-10">
<button class="btn btn-primary f-s-12 rounded-corner">Comment</button>
</span>
</div>
</form>
</div>
<div>
{/* Comment Lists */}...
))}
</div>
</Fragment>
);
}
}
export default connect(
null,
{ postComment }
)(Comments);
This is a page when I add comments to the posts, which works fine but it doesn't update immediately and I have to refresh. The componentDidMount method uses axios to get current user for setting the author for the current comment. I'm changing the state after the form submit, I can't see what the issue is.