Question

这是我第一次进入React领域，所以我确定我的问题是一个简单的新手。作为练习，我试图将现有的工作Web应用程序转换为使用React。我有一个ProductTable，它显示了一个产品列表。它有一个选定的产品＆＃39;字段作为其状态的一部分，每当产品选择更改时都会更新。我的假设是，更改此值（状态）应该导致重新呈现任何新选择。

首次显示时，组件显示成功并正确显示产品列表。但是，当对选择进行更改时，屏幕上显示的内容不会更改。然而，从控制台日志记录和Chrome中的React工具的使用，我可以看到所选产品＆＃39;字段状态确实已经改变，实际上，render方法中的控制台日志条目显示实际上正在使用新选择调用组件的呈现。但它没有改变屏幕上显示的内容 - 桌子继续显示旧的产品选择 - 而我真的无法解决这个问题。

有关何处查看的建议？我很欣赏这里的一些代码可能会更清楚，但鉴于它是现有Web应用程序的转换，以简洁的方式呈现它有点困难，所以我希望我上面的描述足以提出一些建议给这里的专家。

编辑：此处添加的组件代码。正如您将看到的，通过pub / sub进行通知。我一直坚持全球产品选择＆＃39;现在的对象，但这将在适当的时候重构。目前的想法是，其他一些代码对该全局变量进行了更改，然后通过pub / sub通知ProductTable组件。正如我所提到的，通知工作正常，所选产品＆＃39;变量显然正在被改变并且正在运行渲染 - 但是没有发生明显的变化。

var ProductTable = React.createClass({

    getInitialState: function () {
        return {
            selectedProducts: [],
         };
    },


    componentWillMount: function(){
        this.pubsubToken = Arbiter.subscribe('products/selection', function() {
            // update my selection when there is a message
            console.log("Setting selection to "+productSelection.length);
            this.setState({ selectedProducts: productSelection });
        }.bind(this));
    },

    componentWillUnmount:function(){
        Arbiter.unsubscribe(this.pubsubToken);
    },


    render: function () {

        var rows = this.state.selectedProducts.map(function (product, i) {
            return <ProductRow key={product.code} product={product}/>;
        });
        console.log("Running render for ProductTable with "+rows.length+" rows");

        return (
            <div>
                <label htmlFor="products" id="productsLabel">Available products (click or double-click to select):</label>
                <table id="products" className="st-container">
                    <thead>
                    <tr>
                        <td className="st-head" style={{padding:"0px 18px 0px 0px"}}>
                            <table cellSpacing="0" cellPadding="0" border="0" className="st-head-table" style={{width: "100%"}}>
                                <thead>
                                <tr>
                                    <th className="rem" colSpan="0"></th>
                                    <th className="code" colSpan="0">Code</th>
                                    <th className="name" colSpan="0">Name</th>
                                    <th className="pack" colSpan="0">Pack</th>
                                    <th className="size" colSpan="0">Size</th>
                                    <th className="attribs" colSpan="0"></th>
                                    <th className="price" colSpan="0">Price</th>
                                    <th className="unit" colSpan="0">Unit</th>
                                    <th className="rrp" colSpan="0">RRP</th>
                                    <th className="vat" colSpan="0">VAT</th>
                                </tr>
                                </thead>
                            </table>
                        </td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td className="st-body" style={{padding:"0px"}}>
                            <div className="st-body-scroll" style={{overflowY: "scroll", maxHeight: "250px"}}>
                                <table cellSpacing="0" cellPadding="0" border="0" className="st-body-table" style={{width: "100%"}}>
                                    <tbody id="productRows">
                                    ${rows}
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        );
    }
});

Answer 1

好的，我知道，你需要使用componentDidMount而不是componentWillMount，因为正如文档中所述：如果你在这个方法中调用setState，render（）将会看到更新的状态，并且只会执行一次，尽管状态变化。

https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount

使用componentDidMount，一切都应该没问题。

修改你不需要$ {rows}但只需要{rows}。另外我建议你检查你的新数据，它们与初始数据真的不同吗？

React.js组件显然呈现，但显示的内容没有变化

1 个答案: