使用新的 AJAX 查询参数值重新渲染 React 组件答案

【问题标题】：Rerender React component with new AJAX query parameter values使用新的 AJAX 查询参数值重新渲染 React 组件
【发布时间】：2015-09-28 06:14:14
【问题描述】：

我有以下反应组件，它在初始页面加载时获取 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')
);

我的问题是，当日期从日期选择器更改时，我无法重新呈现组件，因此 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 来完成，不需要 Flux，最重要的是，不需要 node.js？

附言。我在这个例子中使用的是 FixedDataTable。

【问题讨论】：

你不能只使用事件参数将日期选择器绑定到你的组件，这样每次收到事件时你的组件都会更新状态，这将导致你的组件重新渲染。
很遗憾，我认为这行不通？据我了解，这只有在有亲子关系的情况下才有效？ facebook.github.io/react/tips/… - 但在这种情况下，我已经在 MVC 中构建了一个应用程序，当我了解 react 时，我越来越多地将它用于不同的部分，但是日期选择器（从/到日期）和选择下拉列表（语言）不是父反应组件 - 它们只是普通的 html 标记。 ://
我在想有一个组件监听一个事件，让 datepicker 触发一个组件正在监听的事件，所以不需要父子组件。 developer.mozilla.org/en-US/docs/Web/Guide/Events/…
我在这里找到了一个资源facebook.github.io/react/tips/dom-event-listeners.html - 我回家后会尝试这样做，并在这里更新:)
看起来做不到。 github.com/facebook/react/issues/284 - 我也测试过。无法让它工作。 ://

标签： reactjs

【解决方案1】：

答案正如Furqan Zafar所说（谢谢）。

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

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

我在获取 TypeError: Can't add property context, object is not extensible 时遇到了一点问题——但那是因为我最初使用 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')
    );

【讨论】：