React componentDidMount未更新状态
React componentDidMount not updating the state
我有一个react组件,它在构造函数方法中以空白默认状态开始。当组件DidMount时,我想用我通过AJAX从API获得的东西来更新状态。
该组件的代码如下所示:
import React from 'react';
import Header from './Header';
import FeedOwnerColumn from './FeedOwnerColumn';
import FeedColumnRight from './FeedColumnRight';
import ReportBug from './ReportBug';
class FeedApp extends React.Component{
constructor(){
super();
this.addComment = this.addComment.bind(this);
this.componentDidMount = this.componentDidMount.bind(this);
this.state = {
ownerInfo:{},
ownerDogs:[],
ownerApps:[],
ownerChat:{},
posts:[]
}
}
componentDidMount(e){
var that = this;
$.get('/api/getUserInit', function(result) {
console.log(result);
this.setState({
ownerInfo: result.ownerInfo,
ownerDogs: result.ownerDogs,
ownerNotifications: result.ownerNotifications,
ownerChat: result.ownerChat,
posts: result.posts
});
}.bind(this));
}
addComment(e){
e.preventDefault();
var currTime = new Date();
currTime = currTime.toLocaleString();
var commentContent = e.target.childNodes[0].value;
var key = Math.random();
key = Math.round(key);
var newComment = {
id: key,
name: "Peter Paprika",
date: currTime,
thumb_picture:"/imgs/user-q.jpg",
profile_link: "/user/123",
content: commentContent,
like_amount: 0
};
var postsObj = this.state.posts;
//console.log(postsObj[0].comments);
var newComments = postsObj[0].comments;
newComments.push(newComment);
console.log(newComments);
this.setState({posts: postsObj});
}
render() {
return (
<div className="clearfix wrapper">
<Header />
<FeedOwnerColumn />
<FeedColumnRight posts={this.state.posts} addComment={this.addComment} />
<ReportBug />
</div>
);
}
}
export default FeedApp;
不幸的是,componentDidMount
方法中的this.setState({})
似乎没有被正确调用,因为没有发生状态更新,并且我的映射函数(期望数组)没有任何作用,并返回错误。
我想在状态更新中使用的对象如下:
ownerChat: Object
ownerDogs: Array[1]
ownerInfo: Object
ownerNotifications: Array[0]
posts: Array[2]
除了这个方法,我真的不知道还能尝试什么:/
如果我理解正确,您希望在更新状态时重新发送安装代码。ComponentDidMount将仅在组件初始化时激发。所有更新都是通过ComponentDidUpdate触发的。将该接口用于更新状态时将要发生的任何事情。
componentDidUpdate: function (prevProps, prevState) {
...
}
更新
对不起,我在用手机回答这个问题,我想我没有读对。如果您想在每次状态发生更改时进行ajax调用,则可以使用componentDidUpdate,而这不是您所要求的。
我注意到你在构造函数中重新声明componentDidMount,它不应该在那里,因为它已经声明了,你正在覆盖它。除了那段代码,我没有看到任何错误。componentDidMount应该立即启动并正确更新。然而,我读到当对象为空时,您的映射函数会出错。请确保您正在处理一个空状态,因为您的第一个绑定将为空,然后第二个绑定将有数据。映射中的错误可能是罪魁祸首。此示例防止子级被绑定,直到ajax调用返回。
import React from 'react';
import Header from './Header';
import FeedOwnerColumn from './FeedOwnerColumn';
import FeedColumnRight from './FeedColumnRight';
import ReportBug from './ReportBug';
class FeedApp extends React.Component{
constructor(){
super();
// only adding functions not defined by super
this.addComment = this.addComment.bind(this);
this.state = {
hasData: false,
ownerInfo:{},
ownerDogs:[],
ownerApps:[],
ownerChat:{},
posts:[]
}
}
componentDidMount(e){
var that = this;
$.get('/api/getUserInit', function(result) {
console.log(result);
console.log('isMounted: ' + this.isMounted());
if (this.isMounted()) {
this.setState({
hasData: true,
ownerInfo: result.ownerInfo,
ownerDogs: result.ownerDogs,
ownerNotifications: result.ownerNotifications,
ownerChat: result.ownerChat,
posts: result.posts
});
}
}.bind(this));
}
addComment(e){
e.preventDefault();
var currTime = new Date();
currTime = currTime.toLocaleString();
var commentContent = e.target.childNodes[0].value;
var key = Math.random();
key = Math.round(key);
var newComment = {
id: key,
name: "Peter Paprika",
date: currTime,
thumb_picture:"/imgs/user-q.jpg",
profile_link: "/user/123",
content: commentContent,
like_amount: 0
};
var postsObj = this.state.posts;
//console.log(postsObj[0].comments);
var newComments = postsObj[0].comments;
newComments.push(newComment);
console.log(newComments);
this.setState({posts: postsObj});
}
render() {
var content = '';
if (this.state.hasData) {
content = (
<div>
<Header />
<FeedOwnerColumn />
<FeedColumnRight posts={this.state.posts} addComment={this.addComment} />
<ReportBug />
</div>
);
}
return (
<div className="clearfix wrapper">
{{ content }}
</div>
);
}
}
export default FeedApp;
让我知道这是否适合你。
相关文章:
- Web应用程序,将成员状态更新为其他成员
- Universal React/redux未在状态更新时呈现
- React.js组件中的状态更新在我的页面下留下了空白
- Ajax/Javascript用户状态更新
- 使用ReactJS使用Redux的简单状态更新事件
- Yii:TbCollapse 多链接(href = #collapse 并将状态更新为 be=“1”)
- 当 redux 状态更新时,在组件上调用 forceUpdate()
- 如何更改输入字段值,使其不会在每次更改时贯穿整个 Redux 状态更新周期
- 使用 Google 表格中列出的地址发送单件状态更新电子邮件
- 评论仅发布到最新的状态更新
- 强制 Twitter Epi 库发布状态更新,即使它是上一条推文的副本
- 使用Facebook javascript sdk获取最新的5个状态更新
- 正确处理多个连续状态更新
- 将状态更新到输入字段
- 如何在JavaScript中创建Twitter状态更新,并从中接收响应
- 如何从web url加载元数据,类似于facebook在状态更新时发布url的做法.
- Onkeyup或onkeypress javascript事件问题-密码状态更新
- WshShell运行不等待,但执行状态更新(运行vs执行问题)
- Web服务——异步执行和状态更新
- 点击后显示FB状态更新弹出窗口