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

// 在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后在改值也能渲染
    
}