※ 问题描述
具体操作：初始化渲染列表，点击按钮向列表中添加数据。
实际效果：页面上的列表并未更新。
import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';
const data = ['Anoyi', 'com'];
export default () => {
const [lines, setLines] = useState<string[]>([]);
useEffect(() => setLines(data), []);
const addLine = () => {
data.push('aaa');
setLines(data);
}
return (
<>
<List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
<Button type="primary" onClick={addLine}>Add</Button>
</>
);
};
※ 解决办法
setLines 赋值新的数组对象，而不是原数组对象的引用。
import {List, Button} from 'antd';
import React, {useState, useEffect} from 'react';
const data = ['Anoyi', 'com'];
export default () => {
const [lines, setLines] = useState<string[]>([]);
useEffect(() => setLines(data), []);
const addLine = () => {
data.push('aaa');
setLines([...data]);
// setLines(data.slice()); // 二选一
}
return (
<>
<List bordered dataSource={lines} renderItem={item => <List.Item>{item}</List.Item>}/>
<Button type="primary" onClick={addLine}>Add</Button>
</>
);
};
※ 原因分析
这个涉及到可变对象和不可变对象的知识，在 vue 和 react 中，如果更新可变对象时，可能不会引起视图更新，这是因为 vue 和 react 默认都是浅监听，内层数据发生改变，并不会监听到。
