Render methods issue - React js

Here I'm trying to get value from DefaultOpts.jsx and update the values to setState in Filters.jsx. But I'm getting error as below :

setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

Filters.jsx

import React from 'react';
import DefaultOpts from 'DefaultOpts.jsx';

export default class Filters extends React.Component {

    constructor(props) {
        super(props);        
        this.state = {
            vOptions : []
        }
        this.handleOptions = this.handleOptions.bind(this)
    }

    handleOptions(params) {
        console.log(params)
        this.setState({
            vOptions : params
        });
    }

    componentDidMount() {
    }

    componentDidUpdate() {
    }

    render() {

        return (

            <div> 

                <DefaultOpts handleOptions={this.handleOptions.bind(this)} />

            </div>
        )
    }
}  

DefaultOpts.jsx

import React from 'react';

class DefaultOpts extends React.Component{

    constructor(props) {
        super(props);
    }

    componentDidMount() {        
    }

    componentDidUpdate() {

    }

    render() {

        var optArray = "";

        $.ajax({
            type: "get",
            url: "url-path",
            success: function(data) {
                optArray = data;
            }
        });

        return (
            <div>
                {this.props.handleOptions(optArray)}
            </div>
        )
    }
}

export default DefaultOpts;

I got some answers in stackoverflow but I'm not able to get what's issue in my code. Please suggest me here what's wrong in my code..