1、需求:
一个动态发布软件,可进行点赞评论,取消赞,删除评论。
2、实现思路:
首先需要进行实时点赞评论等操作。不可能去实时刷新页面进行渲染进行操作。所以我们需要将这些数据存储到我们本地的一个新数组当中。
- 当首次渲染的时候,我们设定一个本地数组来存接口渲染出来的数据。当我们进行操作的时候,再将需要操作的数据
push
到我们自己的数组当中。所以总结来说:点赞取消 评论 删除评论,也就是对数组的增删操作。
对于所需要操作的模块来说,一定需要将其抽取为单独组件。只有这样,才好对数据进行管理处理。
3、具体实现代码不再贴出,主要是许多细节的处理。
4、部分代码步骤:
- 先在本地state中定义一个存放数据的数组。
- 然后进行后台数据存储处理
- // 这里只是我的业务数据处理
// 评论数据处理
getCommentList = () => {
const {
item, dynamicsList: {
commentContentList } } = this.props;
const newCommentList = [];
item.commentList.forEach((item2) => {
(commentContentList || []).forEach(item3 => {
if ((item3.commentId === item2.commentId) && item3.commentType === 0) {
newCommentList.push({
});
}
});
});
this.setState({
initCommentList: newCommentList,
});
}
-
发送评论
这里更新数组用到了一个react插件, 可自行搜索。
更新本地数组的同时调用相应的接口即可。 -
react-addons-update
import update from 'react-addons-update';
if (isCommentContent) {
this.setState({
initCommentList: update(initCommentList, {
$push: [{
commentContent,
receiverName: '',
senderAccountId: accountId,
senderName: accountName,
}]
}),
commentInputVisible: false,
showComment: false,
})
}