Question

这是我的设置：

var PageController = React.createClass({
    getInitialState: function(){
        return {
            'activePage': null,
            'saved': [],
        };
    },  
    savedRoutes: function(){
        return (
            <div className="viewContainer">
            {
                this.state.saved.map(function(route) {
                    console.log('ROUTE', route.destName) // ROUTE PRINTS OUT A STRING HERE
                    return 
                        <div className='favouritedRoute'>
                            <div>Destination: {route.destName}</div>
                            <button>Go!</button>
                        </div>
                })
            }   
            </div>
        );
    }

route刚刚从休息点拉入的位置。

但是，在我上面强调的那一行中，路由ALWAYS是一个有destinationName的有效对象，但.map内的整个位似乎永远不会被渲染！

获得结果后，

this.state.saved不会更改。另外，从控制台，我强制更新组件，但似乎没有任何事情发生，即使我直接访问状态变量，它显然是有效的。

这里发生了什么？

Answer 1

JavaScript的ASI（自动分号插入）规则正在起作用。每当你看到下一行继续return语句时，要小心，因为JavaScript会在那里插入分号。特别是，您的代码更改为此代码，它不返回任何内容并留下死代码：

return;
<div className='favouritedRoute'>
    <div>Destination: {route.destName}</div>
    <button>Go!</button>
</div>;

解决方案：不要在那里打破一条线。

为什么我的React组件不会根据其状态值进行更新？

1 个答案: