如何更改平面列表中特定项目的状态？答案

【问题标题】：How do I change the state present in a specific item within a flatlist?如何更改平面列表中特定项目的状态？
【发布时间】：2022-01-11 10:28:45
【问题描述】：

我正在生成一个包含 cmets 的平面列表。在评论组件中，我使用状态 isColpsed 来确定单个评论是否已折叠。按下每个单独的评论确实会使其崩溃。但是，我想在不影响其他所有评论的情况下从父组件操作此状态。我怎样才能做到这一点？

我尝试使用引用挂钩来访问平面列表中的每个单独项目，但它一直返回“未定义”。我正在使用 react-native-collapsible 库来折叠 cmets。

我的平面列表：

 <FlatList
                    data={SAMPLE_COMMENTS}
                    keyExtractor={keyExtractor}
                    renderItem={({item})=>
                    
                    
                    <Comment 
                                ref={(el) => {rowRefs.current[item.id] = el} } 
                                onPress={()=>{rowRefs.current[item.id].collapseFunction()}}
                                body={item.body} 
                                author={item.author} 
                                level={item.level} 
                                createdAt={item.createdAt} 
                                commentId={item.id} 
                                commentChildren={item.replies} />}
                
                />

评论组件：

const [isCollapsed, setIsCollapsed] = useState(false);
const collapseFunction = () => {setIsCollapsed(!isCollapsed)};



return (
    <Collapsible  collapsed={isCollapsed}>
    
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.container}>
        

            </View>
        </TouchableWithoutFeedback>

    </Collapsible>

【问题讨论】：

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

你可以使用递归函数

// add this to parent
<MapComments
            comments={SAMPLE_COMMENTS}
            childClickHandler={onItemClickHandler}
          />

// MapComments component
const MapComments= ({
  Comments= [],
  childClickHandler,
}) => {
  return (
    <ScrollView>
      <Tree
        CommentTree={CommentTree}
        childClickHandler={childClickHandler}
      />
    </ScrollView>
  );
};

const Tree = ({CommentTree= [], childClickHandler}) => {
  return (
    <View>
      {CommentTree.map(tree => (
        <TreeNode
          key={tree.commentId}
          node={tree}
          childClickHandler={childClickHandler}
        />
      ))}
    </View>
  );
};

const TreeNode = ({node, childClickHandler}) => {
  const [childVisible, setChildVisiblity] = useState(false);

  const hasChild = node.commentChildren.length > 0 ? true : false;

  return (
    <View
      style={{marginRight: node.Level > 1 ? 40 : null}}>
      <TouchableOpacity
        onPress={() =>
          hasChild ? setChildVisiblity(prev => !prev) : childClickHandler(node)
        }>
        <Text numberOfLines={1} style={styles.label}>
          {node.body}
        </Text>
        {hasChild ? (
          <AntDesign name={childVisible ? 'minus' : 'plus'}
          />
        ) : (
          <FontAwesome name="circle" />
        )}
      </TouchableOpacity>

      {hasChild && childVisible && (
        <Tree
          childClickHandler={childClickHandler}
          knowledgeTree={node.commentChildren}
        />
      )}
    </View>
  );
};

【讨论】：