Реакция не повторная рендеринг после изменения состояния - PullRequest
Новая
       5

Реакция не повторная рендеринг после изменения состояния

0 голосов
/ 15 марта 2020 
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);

Это страница, когда я добавляю комментарии к сообщениям, которая отлично работает, но не обновляется сразу, и мне нужно обновить sh. Метод componentDidMount использует ax ios, чтобы получить текущего пользователя для установки автора для текущего комментария. Я изменяю состояние после отправки формы, я не вижу, в чем проблема.

...