[英]React useState passed as props is not changing in child components
I have this component, it has an array of objects called recogidas, but, i'm putting it within a useState, and, i'm passing it to other components as you can see.我有这个组件,它有一个名为 recogidas 的对象数组,但是,我将它放在 useState 中,并且,我将它传递给其他组件,如您所见。
interface ITableProps {
showDrawer: boolean;
}
const SinAsignarTable: FC<ITableProps> = ({ showDrawer }) => {
const animationStart = useSelector(getSinAsignarSlide);
const containerRef = useRef(null);
const [recogidas, setRecogidas] = useState<any[]>(recogidasSinAsignarArray);
return (
<MainContent open={showDrawer} ref={containerRef}>
{/* Title */}
<SinAsignarTitle animationStart={animationStart} />
<TableContainer component={Paper} sx={{ maxHeight: 624, borderRadius: '5px' }}>
<Table stickyHeader aria-label="customized table" sx={{ minWidth: 800 }}>
{/* Header */}
<SinAsignarHead recogidas={recogidas} setRecogidas={setRecogidas} />
{/* Hero content */}
<SinAsignarContent recogidas={recogidas} />
</Table>
</TableContainer>
</MainContent>
);
};
export default SinAsignarTable;
The problem, is that, in SinAsignarHead component, is where i'm updating the useState, but, it only shows the updates after re-rendering the component, let me show you.问题在于,在 SinAsignarHead 组件中,我正在更新 useState,但是,它仅在重新渲染组件后显示更新,让我告诉你。
SinAsignarHead component SinAsignarHead 组件
const SinAsignarHead: FC<{ recogidas: any[]; setRecogidas: Dispatch<SetStateAction<any[]>> }> = ({
recogidas,
setRecogidas,
}) => {
const [descendent, setDescendent] = useState<boolean>(true);
const handleDataOrganization = (): void => {
setDescendent(!descendent);
setRecogidas(recogidas.sort((a: any, b: any) => a.recogida - b.recogida));
// else setRecogidas(recogidas.sort((a: any, b: any) => b.recogida - a.recogida));
};
return (
<>
{/* Table's header */}
<TableHead>
<TableRow>
<TableCell padding="checkbox" sx={{ padding: '0px 0px 0px 4px' }}>
<Checkbox color="primary" indeterminate={false} checked={false} />
</TableCell>
<TableCell align="left" sx={{ padding: '7.5px 16px 7.5px 16px' }}>
<div
style={{
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
Recogida
<IconButton onClick={handleDataOrganization} sx={{ marginLeft: '5px', padding: '6px' }}>
{descendent ? (
<ArrowDownward sx={{ width: 22, height: 22 }} />
) : (
<ArrowUpward sx={{ width: 22, height: 22 }} />
)}
</IconButton>
</div>
</TableCell>
<TableCell sx={{ minWidth: '255px', padding: '7.5px 16px 7.5px 6.5px' }} align="left">
Dirección
</TableCell>
<TableCell sx={{ minWidth: '115px', padding: '7.5px 16px 7.5px 16px' }} align="left">
Ciudad
</TableCell>
<TableCell sx={{ minWidth: '150px', padding: '7.5px 16px 7.5px 16px' }} align="left">
Tipo cuenta
</TableCell>
<TableCell sx={{ minWidth: '105px', padding: '7.5px 16px 7.5px 16px' }} align="left">
Producto
</TableCell>
<TableCell sx={{ minWidth: '165px', padding: '7.5px 16px 7.5px 16px' }} align="left">
Contacto
</TableCell>
</TableRow>
</TableHead>
</>
);
};
export default SinAsignarHead;
When handleDataOrganization function executes, it should update recogidas's state, but it doesn't.当 handleDataOrganization function 执行时,它应该更新 recogidas 的 state,但它没有。
This is SinAsignarContent这是 SinAsignarContent
const SinAsignarContent: FC<{ recogidas: any[] }> = ({ recogidas }) => {
return (
<TableBody>
{recogidas.map(({ recogida, direccion, ciudad, tipoDeCuenta, producto, contacto }, index) => {
// const sinAsignarData = {
// recogida,
// direccion,
// ciudad,
// tipoDeCuenta,
// producto,
// contacto,
// };
return (
<TableRow key={index}>
<TableCell padding="checkbox" sx={{ padding: '0px 0px 0px 4px' }}>
<Checkbox color="primary" checked={true} />
</TableCell>
<TableCell
sx={{
color: '#086BB5',
fontWeight: 500,
cursor: 'pointer',
padding: '5px 20px 5px 0px',
}}
align="center"
>
{recogida}
</TableCell>
<TableCell
sx={{
color: '#00000099',
cursor: 'pointer',
padding: '5px 16px 5px 6.5px',
}}
align="left"
>
{direccion}
</TableCell>
<TableCell
sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
align="left"
>
{ciudad}
</TableCell>
<TableCell
sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
align="left"
>
{tipoDeCuenta}
</TableCell>
<TableCell
sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
align="left"
>
{producto}
</TableCell>
<TableCell
sx={{ color: '#00000099', cursor: 'pointer', padding: '5px 16px 5px 16px' }}
align="left"
>
{contacto}
</TableCell>
</TableRow>
);
})}
</TableBody>
);
};
export default SinAsignarContent;
I've used useState in other ocations, where, i pass data as props, and update it whit no problem, why is not working this time?我在其他地方使用过 useState ,在那里,我将数据作为道具传递,并更新它没有问题,为什么这次不工作? why am i being forced to re-render component?
为什么我被迫重新渲染组件?
sort
of javascript arrays sorts the elements in place, which means it returns the same array object. sort
of javascript arrays 对元素进行就地排序,这意味着它返回相同的数组 object。 When used as a parameter for setRecogidas
, react sees the same array object is being set for recogidas
, so it does not re-render the components that depends on it.当用作
setRecogidas
的参数时,react 看到相同的数组 object 正在为recogidas
设置,因此它不会重新渲染依赖它的组件。
One way that should work is creating a new array from the sorted array:一种可行的方法是从排序后的数组创建一个新数组:
const handleDataOrganization = (): void => {
setDescendent(!descendent);
setRecogidas([...recogidas.sort((a: any, b: any) => a.recogida - b.recogida)]);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.