当多个组件在React中使用状态时，如何仅呈现具有状态的单个组件

Question

我当前使用state在SwipeRow中显示/隐藏图标，但当我滑动一行时，该图标在所有行上都可见，因为图标都引用了相同的状态，所以我的问题是如何仅在滑动的行上显示图标？

我在想，也许我可以在.map()中以某种方式使用index，就像用index用三元包装StyledContainer一样，我不确定。关于如何实现这一点，有什么想法吗？如果您有一个不使用state的方法，也可以。

const foobar = content.map((object, index) => {
return (
<SwipeRow
onRowOpen={() => setSwiped(true)}
onRowClose={() => setSwiped(false)}
>
<StyledContainer swiped={isSwiped}>  <-- This is where it's displayed/hidden
<Icon />
</StyledContainer>

</SwipeRow>
)})

Answer 1

您必须维护所有Swipe行的状态。也许是地图或物体。像这样的东西。

const [swiped, setSwiped] = React.useState({});
const content = content.map((object, index) => {
const id = object.id;
return (
<SwipeRow
onRowOpen={() => setSwiped((oldSwipe) => { oldSwipe.id = true; return oldSwipe;})}
onRowClose={() => setSwiped((oldSwipe) => { oldSwipe.id = false; return oldSwipe;})}
>
<StyledContainer swiped={swiped[id]}>  <----- This is where it's displayed/hidden
<Icon />
</StyledContainer>

</SwipeRow>
)})