Question

我正在学习React（和Javascript），研究数据模型是我自强不息的一部分。第一次尝试时，我创建了一个基本的javascript对象，该对象将与getter和setter一起使用，如下所示：

story_store.js

var story = {
  id:"",
  title:""
}

module.exports = {
    getStory: function() {
        return story
    }

    setStory: function(id, title) {
        story.id = id;
        story.title = title;
    }
}

然后我将在网络调用期间设置对象，并且能够访问（获取）该对象，直到应用程序终止。此版本符合预期。

对于下一个版本，我将模型和获取器/设置器放置在单独的文件中，并使用数组存储模型对象。

story_model.js

export function Story(id, title, text='') {
    let story = {}
    story.id = id;
    story.title = title;
    story.text = text;

    return story
}

story_store.js

var stories = [];

module.exports = {
    getStory: function(id) {
        return stories.find(x => x.id === id);
    },
    setStories: function(stories) {
        stories.forEach(function(story) {
            stories.push(story);
        });
    }
}

这次，setter可以按预期工作，但是当我稍后在执行过程中尝试访问该数组时，它为空。我猜这个问题与将对象放入数组之前创建对象的方式有关，但这对我来说似乎很奇怪。有什么想法吗？

Answer 1

您的问题是setter设置了参数stories的值-JavaScript从内到外地工作以找到一个变量，一旦找到一个变量，它就会停止。您需要在setStories中更改参数名称，以使其寻找全局stories数组：

setStories: function(storyArray) {
    storyArray.forEach(function(story) {
        stories.push(story);
    });
}

还请注意，您可以使用concat来做同样的事情：

setStories: function(storyArray) {
    stories.concat(storyArray);
}

JavaScript中的全局变量寿命

1 个答案: