React 使用数组遍历循环渲染页面时，数组长度和值变了但不触发渲染

怕冷的火焰（~杰）

已于 2022-11-10 19:59:51 修改

阅读量1k

点赞数

分类专栏： React 文章标签：前端

于 2022-11-10 19:39:33 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/127795038

版权

React 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

// 在store内定义一个数组
@observable
list = [];

// 类组件遍历循环渲染
render () {
    return (
        <div>
            {store.list.map(item => {
                return <div onClick={this.handleAdd} key={item.id}>{item.name}</div>
            })}
        </div>
        
    )
}

handleAdd = () => {
    // 第一次没数据因此点击后会渲染这个内容，第二次及以后点击，页面还是只有一条数据
    // store.list.push({name: 111, id: store.list.length + 1});
    
    // 方法1：
    // 想要正常渲染需要改成：
    const list = JSON.parse(JSON.stringify(store.list));
    list.push({name: 111, id: store.list.length + 1});
    store.list = list;

    // 方法2：父组件往子组件传属性
    <Parent config={'config'} />
    // 子组件接收props后在改值也能渲染
    
}