react 修改循环数组对象的数据

文章目录

问题描述
解决办法
案例说明

问题描述

做一个消息评论列表，针对具体某一个消息，里面有“收藏”和“点赞”功能，但是发现直接修改对象的树形，无法改变视图，因此做了笔记，方便后续学习

解决办法

循环遍历所有的对象，然后修改对应的值，重新设置数组对象

案例说明

import * as React from 'react';
import {Icon,Button,Input,Form,
} from 'antd';
import styles from './userinfo.less';
import logo from '/static/logo.svg';
import Connection from '@/store';
import Router from 'next/router';// @ts-ignore
@Connection(({albums, loading}) => ({albums: albums,loading: loading.effects['_user/login'],
}))
export default class UserInfo extends React.Component {// 定义state数据state = {isEdit: false}// 异步获取 JS 普通对象，并绑定在props上当服务渲染时, 我是最先执行的声明周期函数  firststatic async getInitialProps(props) {// 后面我来添加promise来模拟ajax请求，暂时让你更容易理解return {username: 'Yijun Liu',address: 'USA. University of San Francisco',major: 'Computer Scientis',email: 'zhangsan@163.com',"messageList": [{id: 1,email: 'Yijun Liu@163.com',message: 'Just setting up my Twitter.111111',date: '2019-5-18 11:33:56'},{id: 2,email: 'Yijun Liu@163.com',message: 'Just setting up my Twitter.222222',date: '2019-5-18 11:33:56'},{id: 3,email: 'Yijun Liu@163.com',message: 'Just setting up my Twitter.333333',date: '2019-5-18 11:33:56'}]};}// 构造函数， 我是 secondconstructor(props) {super(props);let {username} = this.props;console.log('huangbiao', username)}// 页面加载完了，设置body的背景色    我是 ThirdcomponentDidMount () {document.getElementsByTagName('body')[0].style.background = '#E7ECEF';let {username, address, major, email, messageList} = this.props;console.log('huangbiao', username)this.setState({"username": username,"address": address,"major": major,"email": email,"messageList": messageList})}// 离开页面处理的逻辑  我是 LastcomponentWillUnmount () {}// 页面跳转到首页goHomePage () {Router.push('/profile');}// 收藏collectAction (messageObj, eventObj) {let { messageList } = this.state;// 循环遍历 state中的 数组对象let newListData = messageList.map(function(item, idx){if (item.id === messageObj.id) {// 改变值return {...item, isCollect:  !messageObj.isCollect}} else {return item;}});// 变化之后的 JSON数组，重新赋值this.setState({messageList: newListData})}// 点赞complimentAction(messageObj, index, eventObj) {let { messageList } = this.state;// 修改具体数组对象中的值messageList[index]['isCompliment'] = !messageList[index]['isCompliment'];// 将修改后的数组对象克隆，然后再重新赋值// let newListData = JSON.parse(JSON.stringify(messageList));let newListData = messageList;this.setState({messageList: newListData})}// 获取用户的评论列表getMessageListHtml () {const that = this;let { messageList } = this.state;// 因为 messageList 是异步加载进来的，所以最开始，是undefinedif (!messageList) {messageList = [];}return messageList.map(function(messageObj, index){return (<div className={styles['message-container']} key={messageObj.id}><div className={styles.portrait}>[外链图片转存失败(img-aFNgwwai-1562046300900)(https://mp.csdn.net/static/logo.png)]</div><div className={styles['info-container']}><div className={styles.author}>{messageObj.email}</div><div className={styles.theme}>{messageObj.message}</div><div className={styles.time}>{messageObj.date}<div className={styles['tool-bar']}><div className={styles['bar-btn']}>{/* 点赞 */}{messageObj.isCompliment ? <Icon type="heart" onClick={that.complimentAction.bind(that, messageObj, index)} style={{color: 'red'}} /> : <Icon type="heart" onClick={that.complimentAction.bind(that, messageObj, index)}/>}</div><div className={styles['bar-btn']}><Icon type="message" onClick={that.collectAction.bind(that, messageObj)}/></div><div className={styles['bar-btn']}>{/* 收藏 */}{messageObj.isCollect ? <Icon type="star" onClick={that.collectAction.bind(that, messageObj)} style={{color: '#FEC603'}} />: <Icon type="star" onClick={that.collectAction.bind(that, messageObj)}/>}</div></div></div></div></div>);})}render() {let messageListHtml = this.getMessageListHtml();return (<div className={styles['userinfo-page']}><div className={styles['main-container']}><div className={styles['main-center']}>{messageListHtml}</div></div></div>);}
}

react 修改循环数组对象的数据相关推荐

json vue 对象转数组_vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 json数组对象列表数据.分享给大家供大家参考,具体如下: vuejs的出现减轻了对dom的直接操作,同时它提供的 v-for 渲染列表数据也给我 ...
vue循环数组对象和对象
一.在标签中v-for循环 1.循环数组对象列表(一般后台返回的形式) 2.循环对象(3个参数[有序]:value,key,index) 二.在js中循环遍历数组对象(其实这是es6语法) for ...
VUE、JS对数组对象进行数据改造
要求将数组对象按一定格式转换,key为c0.c1等,value如果是数字不变不是数字变为1,同时每个对象第一位不用动 data1: [{ id: 1, qqq: 'q', www: 'w' },{ ...
循环数组对象 php,PHP循环遍历stdClass对象的数组
我有一个在MySQL中运行的查询,它返回一个结果作为stdClass对象,如下所示: array(8){ [ 0 ]=>object(stdClass)#36(1){ [ "color ...
循环数组对象，并且返回一个新的数组对象
最基础的,感觉挺好用 ```javascript [{dd:'22',AA:'张三',re1:123},{dd:'33',AA:'李四',re1:234},{dd:'44',AA:'我去',re1:4 ...
python 数组运算_python数据分析（二） python numpy--数组和矢量运算--数组对象
Numpy numpy是数值计算最重要的基础包,几乎所有的科学运算的模块底层所用的都是numpy数组. Numpy本身没有提供多么高级的数据分析功能,他所提供的功能主要是: 1.具有矢量算术运算(用数 ...
【案例】js 数组对象去重，根据对象的一个属性去重、合并
// 模拟数据 let Iclass = [{name: 'DFG', apply_phone: '131****8569'},{name: '李三', apply_phone: '150****88 ...
怎样在数组末尾添加数据_如何利用C++实现可变长的数组？
应该执行什么功能? 假设我们要实现一个将自动扩展的数组类,是否需要实现函数?让我们从下面主要功能使用的功能开始,看看我们需要实现哪些功能. 输出结果: 0 1 2 3 4 0 1 2 100 4 您需 ...
前端vue从后台取到数据（数组对象）后遍历给对象添加属性，修改这个属性为什么没有用？
1. 场景: 带有数据监听的框架都可,我用的是vue框架从后台获取数组对象,想给对象添加只在前端用得上的属性如item_checked: false 2. 问题: 控制台输出该对象已经存在该属性了, ...

react 修改循环数组对象的数据

文章目录

问题描述

解决办法

案例说明

react 修改循环数组对象的数据相关推荐

最新文章

热门文章