BUG：openinula2.0复杂状态更新问题

**openinula2.0框架复杂状态更新问题** 
openinula2.0框架下，同时更新数组和值时，会出现问题，只更新数组时，数组元素减少时会出现渲染问题。大致分为以下三种情况。

**一、参照官网：把所有状态及状态更新组织在一起** 
![输入图片说明](https://foruda.gitee.com/images/1752672005315811088/2d35eabd_14357148.png "屏幕截图")
示例代码如下
```
import { render } from "@openinula/next";
import "./index.css";

const initialItems = [
  { id: '1', name: 'Item 1' },
  { id: '2', name: 'Item 2' },
  { id: '3', name: 'Item 3' },
  { id: '4', name: 'Item 4' },
  { id: '5', name: 'Item 5' },
  { id: '6', name: 'Item 6' },
]

const initialActiveKey = '1';

function App() {
  let customState = {
    items: initialItems,
    activeKey: initialActiveKey,

setActiveKey(key) {
      this.activeKey = key;
      this.show();
    },

addItem(item) {
      this.items = [...this.items, item];
      this.setActiveKey(item.id);
      this.show();
    },

removeItem(id) {
      this.items = this.items.filter(item => item.id !== id);
      this.setActiveKey(this.items[0]?.id || null);
      this.show();
    },

show() {
      console.log(this.items, this.activeKey);
    }
  };

const handleChangeItem = (id, action) => {
    if (action === 'add') {
      customState.addItem({ id, name: `Item ${id}` });
    } else if (action === 'remove') {
      customState.removeItem(id);
    }
  }

const hanleChangeActiveKey = (key) => {
    customState.setActiveKey(key);
  }

return (
    <div style={{ display: "flex", flexDirection: 'column', gap: 20 }}>
      <for each={customState.items}>
        {(item) => (
          <div key={item.id}>
            <text className={`${customState.activeKey ===item.id ? "active": ""}`} onClick={() => hanleChangeActiveKey(item.id)}>{item.name}</text>
            <button onClick={() => handleChangeItem(item.id, 'remove')}>Remove</button>
          </div>
        )}
      </for>
      <button onClick={() => handleChangeItem(Date.now().toString(), 'add')}>Add</button>
    </div>
  )

}

render(<App />, document.getElementById("root"));
```

具体情况：以上代码打印均无问题，即customState状态的更新没有问题，但是activeKey改变、items增加减少都不会触发页面渲染。

**二、状态组织在一起，更新函数单独列出**

```
import { render } from "@openinula/next";
import "./index.css";

const initialItems = [
  { id: '1', name: 'Item 1' },
  { id: '2', name: 'Item 2' },
  { id: '3', name: 'Item 3' },
  { id: '4', name: 'Item 4' },
  { id: '5', name: 'Item 5' },
  { id: '6', name: 'Item 6' },
]

const initialActiveKey = '1';

function App() {

let customState = {
    items: initialItems,
    activeKey: initialActiveKey,
  }

const hanleChangeActiveKey = (key) => {
    // customState = {
    //   ...customState,
    //   activeKey: key,
    // }
    customState.activeKey = key;
  }

let customItems = initialItems;
  let customActiveKey = initialActiveKey;

const hanleChangeActiveKey = (key) => {
    customActiveKey = key;
  }

return (
    <div style={{ display: "flex", flexDirection: 'column', gap: 20 }}>
      <for each={customState.items}>
        {(item) => (
          <div key={item.id}>
            <text className={`${customState.activeKey ===item.id ? "active": ""}`} onClick={() => hanleChangeActiveKey(item.id)}>{item.name}</text>
            <button onClick={() => handleChangeItem(item.id, 'remove')}>Remove</button>
          </div>
        )}
      </for>
      <button onClick={() => handleChangeItem(Date.now().toString(), 'add')}>Add</button>
    </div>
  )

}

render(<App />, document.getElementById("root"));
```

具体情况：此时纯activeKey改变没有问题。
添加item不改变activeKey时（即注释掉customState.activeKey = id;）没有问题，但如果同时改变activeKey，旧activeKey不会消失，即如果以初始状态为起点点击add，界面上会更新新的item，但是第一个item和新加的每一个item都会被渲染成active状态，此时点击任何一个item所有item都会变回非active状态。
删除item时，除新加的立即点击删除和第一个item可以直接删除之外，其他item点击删除都需要点两次，打印发现其他第一次点击删除时打印的activeKey都是undefined，另外删除item的bug与activeKey是否同时改变暂时没发现联系。

**三、状态分开写**

```
import { didMount, render } from "@openinula/next";
import "./index.css";

const initialItems = [
  { id: '1', name: 'Item 1' },
  { id: '2', name: 'Item 2' },
  { id: '3', name: 'Item 3' },
  { id: '4', name: 'Item 4' },
  { id: '5', name: 'Item 5' },
  { id: '6', name: 'Item 6' },
]

const initialActiveKey = '1';

function App() {

let customItems = initialItems;
  let customActiveKey = initialActiveKey;

const hanleChangeActiveKey = (key) => {
    customActiveKey = key;
  }

return (
    <div style={{ display: "flex", flexDirection: 'column', gap: 20 }}>
      <for each={customItems}>
        {(item) => (
          <div key={item.id}>
            <text className={`${customActiveKey ===item.id ? "active": ""}`} onClick={() => hanleChangeActiveKey(item.id)}>{item.name}</text>
            <button onClick={() => handleChangeItem(item.id, 'remove')}>Remove</button>
          </div>
        )}
      </for>
      <button onClick={() => handleChangeItem(Date.now().toString(), 'add')}>Add</button>
    </div>
  )

}

render(<App />, document.getElementById("root"));

```

具体情况：此时纯activeKey改变没有问题，
删除和增加item时activeKey同时改变只会改变active状态，渲染的item个数不会改变。
如果删除和增加item的同时不改变active状态，增加没问题，删除与第二种情况一样，只有新加的item和第一个item能够直接删除，其他删除都需要点两次。

GVP openInula/inula

内容风险标识

评论 (1)

GVPopenInula/inula

内容风险标识