Question

我甚至不知道这个名字，因此标题。

我基本上通过加载通过props传递的数据（用于编辑）或加载空结构（以创建新条目）来初始化我的模态表单：

defaultStruct: {
    text: null,
    active: true,
    options: [
        {
            text: null,
            correct: true,
            position: 0,
            _destroy: false,
        }
    ]
},
getInitialState() {
    return {
        question: this.props.initialQuestion == null ? this.defaultStruct : this.props.initialQuestion,
    };
}

主要想法是在提交表单后再次使用this.defaultStruct重置表单。

但是，当我在提交后执行console.log（this.defaultStruct）时，我可以看到它实际上已经填充了表单状态的数据。那么......到底是怎么回事。

handleSubmit(e){
    if(e){e.preventDefault();}
    $.ajax({
        url: this.state.question.id == null ? this.props.applicationData.routes.questionsCreate : this.props.applicationData.routes.questionsUpdate,
        dataType: 'json',
        contentType: 'application/json',
        type: 'POST',
        data: this.digestDataForStupidRails('question', 'options'),
        success: function(data) {
            console.log(this.defaultStruct)
        }.bind(this),
        error: function(xhr, status, err) {

        }.bind(this)
    });
}

控制台输出：

{
    "question": {
        "text": "preg 1",
        "active": true,
        "options": [
            {
                "text": "preg 1 a 1",
                "correct": false,
                "position": 0,
                "_destroy": false
            },
            {
                "text": "preg 1 a 2",
                "correct": true,
                "position": 1,
                "_destroy": false
            }
        ]
    }
}

当然我可以通过使用函数来解决这个问题，并且每次都返回一个空结构，但这让我很好奇。

有人可以解释这种行为吗？

Answer 1

这不是React特有的，它是javascript（或基本上任何类似语言）的工作原理。 defaultStruct是一个对象，因此它通过引用传递，而不是作为新副本传递。如果你想保留getInitialState，你应该找到clone the object的方法，或者通过喜欢的答案中建议的方式，或者使用已经具有此功能的库，例如lodash ，underscore或类似的。或者，由于您已经在使用jquery，因此可以使用$.extend，如第一个链接的第二个答案中所述。

为什么反应分配这样的变量？

1 个答案: