Question

我的反应应用程序遇到了一些麻烦。

我正在尝试动态更新存储在状态中的对象内的对象数组。

当用户按下按钮时，它会创建一个处于UUID状态的新对象，该父对象包含内容的对象数组。默认情况下，在创建父对象时，它会将单个内容对象添加到父对象内的数组中。

我现在需要在该子数组中添加更多对象。

我遇到的问题是，一旦我创建了父对象（效果很好），我尝试添加一个内容对象，但它会导致整个组件重新渲染，我的父对象消失。然而，一旦他们有了空洞，我就不能再创建一个父对象，因为它说“未捕获的TypeError：scratchTickers.push”不是一个函数＆＃39;

所以基本上我创建了一个创建一个列表的对象，列表对象里面的内容数组应该用项填充列表。

Ticker是父对象，

_createTicker在内容数组＆＃39;中创建一个带有UUID和单个项目对象的空白对象。我可以多次调用它，它可以正常工作。

当我调用_createTickerItem时，问题就出现了这应该通过循环遍历所有并查找匹配的ID来引入正确的股票代码对象，然后它拉出内容数组并将其保存到本地变量，推送新的空白内容对象到此数组，然后应该更新状态。

执行此操作会导致整个组件重新渲染，当发生这种情况时，我无法再创建自动收报机对象，因为我收到错误'Uncaught TypeError: scratchTickers.push is not a function'

这是我的代码：

getInitialState () {
        return {
            muiTheme: ThemeManager.getMuiTheme(themeSwitcher.getMaterialTheme()),
            scratchTickers: [],
        };
    },

    _createTicker: function() {
        var blankTicker = {
            id       : uuid.v1(),
            area     : 'Scratch',
            name     : 'Untitled',
            status   : "",
            size     : "",
            created  : {
                name : "username",
                time : new Date()
            },
            modified : {
                name : "username",
                time : new Date()
            },
            content: [{
                content: "Dummy content",
                TowerRed: "",
                TowerText: "Headlines"
            }]
        };

        let scratchTickers = this.state.scratchTickers;

        scratchTickers.push(blankTicker);

        this.setState({scratchTickers: scratchTickers});
    },

    _createTickerItem: function (id) {
        console.log("creating ticker item");
        console.log("Ticker ID: ", id);
        var tickerID = id;
        var key      = null;

        for (var i = 0; i < this.state.scratchTickers.length; i++) {

            if(this.state.scratchTickers[i].id == tickerID) {
                var ticker = this.state.scratchTickers[i];
                var key    = i;
            }
        }

        var blankContent = ({
                content: "Ticker Content",
                TowerRed: "",
                TowerText: "Headlines"
            });

        var currentContent = this.state.scratchTickers[key].content;

        var newContent = [];

        currentContent.push(blankContent);

        this.setState({
            scratchTickers: update(this.state.scratchTickers[key], {content: {$set: currentContent}})
        });


    },

反应更新状态中的对象数组

0 个答案: