AntD Upload在React useState中使用问题

主要代码

<Upload
	action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
	listType="picture-card"
	fileList={infoList}
	onPreview={(val:any)=>{
		setName(val.name);
		setImage(val.url);
		setVisible(true);
	}}
	showUploadList={{showRemoveIcon: false}}
	onChange={(val:any)=>{setInfoList(val)}}
>
	{null}
</Upload>
<Modal
	visible={visible}
	title={name}
	footer={null}
	onCancel={()=>setVisible(false)}
>
	<img alt="example" style={{ width: '100%', height: '100%' }} src={image} />
</Modal>
<div style={{display:'flex'}}>
	{infoList&&infoList.map((item:any)=>{
		return <div key={item.id} style={{width:112,display:'flex',justifyContent:'center'}}>{item.name}</div>
	})}
</div>
<div style={{display:'flex',marginTop:3}}>
	{infoList&&infoList.map((item:any)=>{
		return <div key={item.id} style={{width:112,display:'flex',justifyContent:'center',color:'#4B74FF',cursor:'pointer'}}
			onClick={()=>{deleteImage(item.id)}}>
		删除</div>
	})}
</div>

	const [infoList, setInfoList] = useState([]) as any;
	const [name, setName] = useState('') as any;
	const [image, setImage] = useState('') as any;
	const [visible, setVisible] = useState(false);

	const deleteImage = (id: any)=> {
        confirm({
            title: '确认删除?',
            centered: true,
            content: '',
            autoFocusButton: null,
            onOk:async ()=> {
                deleteItems(id);
            },
            onCancel: ()=> {

            }
        });
    }

    const deleteItems = (id: any) => {
        let infoListCopy = infoList;
        for(let i in infoListCopy) {
            if(infoListCopy[i].id === id) {
                infoListCopy.splice(i,1);
            }
        }
        setInfoList([...infoListCopy]);
    }

遇到问题

1、使用splice删除时useState的值改变但页面未渲染

使用setInfoList([...infoListCopy]);而不是setInfoList(infoListCopy);
改变数组地址，useState判断数组发生了变化，页面重新渲染

2、隐藏删除提示

showUploadList={{showRemoveIcon: false}}

参考

AntD Upload上传
用React 中的useState改变值不重新渲染的问题