DOM не обновляется после обновления json -REACT

Question

с использованием реакции

Я вызываю данные json с помощью axios с локального сервера, который я создал с помощью json-server, и использую карту для их отображения.

Я делаю пост-запрос с формой в приложении, данные публикуются в json, но мой DOM теперь показывает новые данные, они отображаются только при обновлении страницы ... как я могу сделать так, чтобы она отображалась без обновления страница в реакции ..

Вот код

    import React, { Component } from 'react';
    import axios from 'axios';


    class AddData extends Component {
    constructor(props){
        super(props);
        this.state = {
        name:'',
        email:'',
        occupation:'',
        persons:[]
        }

        this.handleChangeName = this.handleChangeName.bind(this);
        this.handleChangeEmail = this.handleChangeEmail.bind(this);
        this.handleChangeOccupation = this.handleChangeOccupation.bind(this);
        this.handleOnClickAdd = this.handleOnClickAdd.bind(this);
    }

    handleChangeName(e){
        this.setState({name:e.target.value});
    }

    handleChangeEmail(e){
    this.setState({email:e.target.value});
    }

    handleChangeOccupation(e){
    this.setState({occupation:e.target.value});
    }

    handleOnClickAdd(e){
    e.preventDefault();

    const params ={
        name: this.state.name,
        email: this.state.name,
        occupation: this.state.occupation
    }

    const config = {
        headers: {'X-My-Custom-Header': 'Header-Value'},
    };


    axios({
    method: 'post',
    url: 'http://localhost:3000/familymembers',
    data:params,
    config
    }).then(res => {
    const persons = res.data;
    this.setState({ persons });
    });
    }

    render() {
        return (
        <div className="row">
        <form onSubmit = {this.handleOnClickAdd}>        
            <div className="form-group">
                <label>Add Data</label>
                <input type="text" className="form-control" onChange = {this.handleChangeName}/>
                <input type="text" className="form-control" onChange = {this.handleChangeEmail}/>
                <input type="text" className="form-control" onChange = {this.handleChangeOccupation}/>
                <input type="submit" value="Submit" />
            </div>
            </form>
            </div>
        )}

    }


    export default AddData;

Спасибо Джастин