实际效果：页面上的列表并未更新。
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>
