reactjs – 使用新的AJAX查询参数值重新呈现React组件

发布时间：2020-12-15 22:55:31 所属栏目：百科来源：网络整理

导读：我有以下react组件,它在初始页面加载时获取Ajax数据,如下所示： var MyTable = React.createClass({ getInitialState: function() { return { rows: [ ['Something,' '],['Something else',' '] ] }; },componentDidMount: function() { var self = this; $.

我有以下react组件,它在初始页面加载时获取Ajax数据,如下所示：

var MyTable = React.createClass({

    getInitialState: function() {
        return {
            rows: [
                ['Something,' '],['Something else',' ']                ]
        };
    },componentDidMount: function() {
        var self = this;
        $.get('http://domain.com/api/Orders/from-date/' + fromDate + '/to-date/' + toDate,function(result) {
                var newState = React.addons.update(this.state,{
                    rows: {
                        0: { 
                            1: { $set: result }
                        }
                    }
                });
                this.setState(newState);            
            }.bind(this)
        );
    },render: function() {
        return (

            <Table
                rowHeight={50}
                rowGetter={(rowIndex) => {
                    return this.state.rows[rowIndex];
                }}
                rowsCount={this.state.rows.length}
                onRowClick={this._onRowClick}
                width={1000}
                height={342}
                groupHeaderHeight={40}
                headerHeight={0}>
                <ColumnGroup label="Products"
                             fixed={true}>
                    <Column label=""
                            width={col1}
                            dataKey={0} />
                    <Column label=""
                            width={700}
                            dataKey={1} />
                </ColumnGroup>
            </Table>

        );
    }
});
MyTable = React.createFactory(MyTable )
React.render(MyTable(),document.getElementById('my-table-container')
);

我的问题是,当日期从datepicker更改时,我无法重新呈现组件,因此Ajax日期参数更改,并且需要使用这些新值进行另一个请求.

我尝试过的：

$(function(){
    $("#calculate-orders").on("click",function(){
        fromDate = document.getElementById("from-date").value;
        toDate = document.getElementById("to-date").value;

        React.render(MyTable(),document.getElementById('my-table-container')
        );

    })
})

但似乎没有任何事情发生.我怎么解决这个问题？并且它可以仅使用JavaScript / jsx完成,而不需要通量,最重要的是,没有node.js？

PS.我在这个例子中使用的是FixedDataTable.

解决方法

答案就像Furqan Zafar所说(感谢男人).

使用相同的逻辑实现componentWillReceiveProps生命周期方法并传递新属性.

$.get('http://domain.com/api/Orders/from-date/' + nextProps.fromDate + '/to-date/' + nextProps.toDate,{
                    rows: {
                        0: { 
                            1: { $set: result }
                        }
                    }
                });
                this.setState(newState);            
            }.bind(this)
        );

我遇到TypeError有点问题：无法添加属性上下文,对象不可扩展 – 但那是因为我最初使用JavaScript创建了组件而我正在jsx中重新渲染.它需要是相同的..例如：

如果我最初这样做：

MyTable = React.createFactory(MyTable)

然后,这将无法重新渲染：

React.render(
    <MyTable fromDate={fromDate} toDate="{toDate}"/>,document.getElementById('my-table-container')
);

但这会：

React.render(
    MyTable(
        {
            'fromDate': fromDate,'toDate': toDate
        }),document.getElementById('my-table-container')
    );

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!