Javascript 组件是否将安装触发器而不停止?
首先,我是React的新手,这是我的第一个项目 我正在创建一个博客应用程序,我的应用程序类如下:Javascript 组件是否将安装触发器而不停止?,javascript,reactjs,reactjs-flux,Javascript,Reactjs,Reactjs Flux,首先,我是React的新手,这是我的第一个项目 我正在创建一个博客应用程序,我的应用程序类如下: var App = React.createClass({ getInitialState: function () { return { posts: Store.getPosts(), newPost: { headerText: '', bodyText:
var App = React.createClass({
getInitialState: function () {
return {
posts: Store.getPosts(),
newPost: {
headerText: '',
bodyText: ''
}
};
},
componentWillMount: function () {
console.info("App component will mount")
Store.addChangeListener(this.changeState);
},
componentWillUnmount: function () {
Store.removeChangeListener(this.changeState);
},
componentDidMount: function() {
console.info("App component mounted.")
Store.removeChangeListener(this.changeState);
} ,
changeState: function () {
this.setState({
posts: Store.getPosts()
});
},
当我的应用程序运行时,component将挂载method,并从flux Store调用this.changeState
方法
但这件事不会停止。从服务器连续调用xhr请求。当应用程序启动时,我的网络控制台是这样的
我尝试添加componentDidMount
来解决这个问题,但在这种情况下,当应用程序启动时,服务器并没有收到帖子
我只想在应用程序启动时加载一次所有帖子,然后在我调用setState
方法时运行。您被一次又一次地调用,所以您的商店应该有类似的方法
var _post={};
getDataonly:function()
{
return _post;
},
您必须创建一个能够处理状态更改的函数,并在需要时调用该函数
function setpostState()
{
return
{
post:Store.getPost()
}
}
当你从api获取数据时,你必须设置这个变量,比如
$.ajax({
type: "GET",
url : config.serviceURL + "/posts"
})
.then(function successCallback(res) {
if(!res.error) {
that.posts = res.data;
_post=res.data;
that.emitChange();
} else console.error(res.message);
})
您的main.js changeState方法应该是
changeState: function () {
this.setState(setpostState());
},
可疑的是changeState功能。您使用的是什么通量实现?通常应如下所示:
changeState: function (state) {
this.setState(state);
}
通常,您与store交互时会抛出操作并侦听store更改,而不直接调用任何方法。您的store.getPosts()是否调用API?如果是,那么你仍然不清楚fluxYes:(就像我上面说的,我是react的新手。但是如果没有API调用,它通常会连续调用getStores吗?当我的应用程序运行时,ComponentMount方法触发并调用this.changeState方法,它调用Store.getPosts()方法。当您的组件加载时,调用getInitialState,它将获取数据。做一件事将您的代码上传到dropbox中的某个地方,让我检查一下,不包括节点模块。是的,op直接调用API而不使用操作,这对fluxAs不是一个好的做法。我在下面给出了注释,我这样做了我不相信在changeState中调用存储的某些特定API是正确的方法。因为他正在学习,我们应该帮助他遵循wbest实践,而不是解决办法。@ungarida:是的,这不是正确的方法,我将更改我的答案,但上述更改仅适用于OP:)因为他用相同的结构实现了应用程序