React.js setState仅在第二次工作

Question

我的React组件：一个表单（省略了渲染方法）

var AddProductForm = React.createClass({
    getInitialState: function(){
        return { 
            data: {
                name: '',
                description: '',
                abbreviation: '',
                category: '',
                metric: ''
            }                   
        }
    },
    render: function() {...},
    readFields: function() {
        var new_data = {
            name: $('#add_product_form_name').val(),
            description: $('#add_product_form_description').val(),
            abbreviation: $('#add_product_form_abbreviation').val(),
            category: $('#add_product_form_category').val(),
            metric: $('#add_product_form_metric').val()
        }
        this.setState({
            data: new_data
        });
    },
    submit: function() {    
        this.readFields();
        $.ajax({
            type: "POST",
            url: 'http://127.0.0.1:8000/inventory/product',
            data: this.state.data,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function(response){
                console.log(response)
            },

        });
    }
});

每当我致电“提交”时，函数（由UI中的按钮调用），填好表格后， this.state.data 对象的所有字段都为空，就像在 getInitialState 。但是，当我第二次点击（和第三次等）时， this.state.data 可以使用我的表单数据。

我每次都在提交函数中调用 readFields 函数，但仅从第二次启动时开始。我无法理解为什么。