I’m encountering an issue on iOS when rendering a list using React.
Each list item uses the array index as the React key and consists of two parts:
a header section that uses position: sticky for dynamic sticking behavior, and
a body section whose height is automatically adjusted based on its content.
When the list data is updated, I sometimes observe that the sticky header content does not update visually in time, even though the underlying data and DOM have changed.
// demo.jsx
import React, { useState } from 'react';
import { Button } from '@iftide/mobile';
import './style2.less';
// import data1 from './data1.json';
// import data2 from './data2.json';
const prefixCls = 'im-detaillist';
const data1 = [
{
sectionTitle: '2025年05月'
},
{
sectionTitle: '2025年04月'
},
{
sectionTitle: '2025年03月'
}
];
const data2 = [
{
sectionTitle: '2023年08月'
},
{
sectionTitle: '2023年07月'
},
{
sectionTitle: '2023年06月'
},
{
sectionTitle: '2023年05月'
}
];
export default function App() {
const [list, setList] = useState(data1);
const [toggle, setToggle] = useState(true);
return (
<div>
<Button
title="更新2"
onClick={() => {
setToggle(!toggle);
setList(data2);
}}
/>
<div className={`${prefixCls}-container2`} style={{ height: `700px` }}>
{list.map((section: any, sectionIdx: number) => {
return (
<div
className={`${prefixCls}`}
key={String(sectionIdx)}
// id={section.sectionTitle}
>
<div className={`${prefixCls}-section-title`} role="text">
{section.sectionTitle}
</div>
<div
style={{
background: 'green',
height: `${Math.ceil(400 * Math.random()) + 50}px`
}}
>
省略
</div>
</div>
);
})}
</div>
</div>
);
}
.@{prefixCls}-section-title {
position: sticky;
position: -webkit-sticky;
will-change: transform;
top: 0;
z-index: 1;
padding-left: 11px;
width: 100%;
height: 30px;
font-size: var(--font-size-s);
font-weight: 400;
line-height: 30px;
color: #000000;
background-color: #F4F5F7;
letter-spacing: 0;
}
0
0
136