如何从同一平面列表中的另一个项目更改平面列表中项目的状态？

Posted 2023-02-16

【中文标题】如何从同一平面列表中的另一个项目更改平面列表中项目的状态？

【英文标题】：How do I change the state of an item in a flatlist from another item in the same flatlist?

【发布时间】：2022-01-10 10:20:31

【问题描述】：

我正在制作具有可折叠回复的嵌套 cmets。为此，我只需按照收到它们的顺序将所有 cmets 呈现在一个平面列表中，然后根据每个项目的级别属性在左侧添加一个边距。传入的评论数据如下。

    id: "1a",
    parent: "a",
    author: "joemorgan",
    body: "Such an amazing car, had seen this one in Paris earlier!",
    level: 0,
    replies: ["4w", "2f"]
,

    id: "4w",
    parent: "1a",
    author: "jason",
    body: "Truly a beast",
    level: 1,
    replies: []
,

    id: "2f",
    parent: "1a",
    author: "katparis",
    body: "Rightly said",
    level: 1,
    replies: []
,

然后我使用以下平面列表渲染这些 cmets

             <FlatList
                    data=SAMPLE_COMMENTS
                    keyExtractor=item=>item.id.toString()
                    renderItem=Comment body=item.body level=item.level commentId=item.id commentChildren=item.replies />
/>

最后，我将实际的评论组件包装在一个 Collapsible（react-native-collapsible 包）中。这样我可以通过点击它来折叠特定的评论。 'collapsed' 属性是使用 isCollapsed 状态设置的。

   const [isCollapsed, setIsCollapsed] = useState(false);


   <Collapsible collapsed=isCollapsed>
    
        <TouchableWithoutFeedback onPress=()=> setIsCollapsed(true) >
            <View style=styles.container>
               

            </View>
        </TouchableWithoutFeedback>

    </Collapsible>

使用上面的代码，我可以通过点击来折叠每个单独的评论。

问题是我不想折叠我正在按下的评论。我想折叠它的子级，为此我真的很想知道如何在不影响所述父级注释的情况下为父级注释的子级操作 isCollapsed 状态。由于每条评论都有一个唯一的 id，我相信也许可以使用它来完成？每个评论的孩子也是一个属性，所以也许这也有帮助。

任何线索都会非常有帮助。谢谢

【问题讨论】：

使用您拥有的作为自己的组件。然后递归地为每个级别添加更多

【参考方案1】：

你显然有一个属性commentChildren，但我看不到它包含什么。您不能使用该属性来折叠所有评论子项吗？

无论如何，如果不是： 决定哪些项目组件应该被折叠的逻辑需要在项目组件之外，并且项目组件只有它们自己的状态和一个回调来通知控制器逻辑，比如“我被点击了，我的 ID 是xyz”。然后控制器就会知道该做什么。

喜欢：

const childsOfComment = findChildCommentsRecursively( allComments, clickedComment );
...
<Comment
    commentId= item.id 
    isCollapsed= childsOfComment.includes( item.id ) 
/>

也许更好的办法是维护整个列表，包括有关在状态中折叠什么的信息，并让渲染函数只渲染该状态。

    id: "1a",
    collapsed: true,  // <-- store collapsed info in state
    parent: "a",
    ...
,

这可能需要一些重构，并且可能更复杂，这取决于您是否还需要维护原始列表。