react redux防止在状态更改时重新提交列表项

Question

我有一个名为Row的列表项。行有三个部分，我已经将每个部分的宽度存储在一个状态中

rowWidth: [
{
id: 'name',       
width: 200,

},
{
id: 'size',       
width: 70,

},
{
id: 'status',      
width: 150,

},
{
id: 'progress',       
width: 200,

},
{
id: 'lasttry',       
width: 200,

},
{
id: 'eta',     
width: 50,

},
]

我通过一个更新存储的外部句柄来更改单列的宽度。

switch (actions.type) {
case consts.CHANGE_HEADER_WIDTH :  return {
...state,
headerWidth: state.headerWidth.map((item) =>
item.id === actions.payload.id ?  { ...item, width: actions.payload.neWidth }  : item
),
} 

break;
default : return state;
}

这是行

const headerWidth = useSelector((state) => state.ui.headerWidth)


const getWidth = useCallback((id) => {
const l = _.find(headerWidth, function (item) {
return item.id === id
})
return l.width
})
return(
<Row>
<Section1 style={{ width: getRow('name') }}/>
<Section2 style={{ width: getRow('size') }}/>
<Section3 style={{ width: getRow('status') }}/>
</Row>
)

我的问题是-如何在不重新绘制行的情况下更改这些div的宽度

Answer 1

感谢大家的帮助。我知道必须有一个重读者才能看到国家的变化。