React-native：如何在 ScrollView 的特定项目中进行更改

Question

我有一个带有嵌套数组的 json 响应。 我正在使用Accordion-Collapse-react-native库在 UI 中显示此数组。

{
"accountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
"accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
"accountLocationTypeCode": "LOCATION",
"locationName": "First Location",
"children": [{
        "accountLocationUid": "3000b1d7-4da4-45ab-b87c-2d41b867eea0",
        "accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
        "accountLocationTypeCode": "AREA",
        "locationName": "Area 4",
        "parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
        "allowAddLocation": true,
        "children": [{

            "accountLocationUid": "8606de2a-1af0-4e81-ae11-df36000c4809",
            "accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
            "accountLocationTypeCode": "AREA",
            "locationName": "Area 2",
            "parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
            "children": []
        }]
    }
]
}

每个项目都会有嵌套数组的子数组。 我想做的是当用户点击任何带有嵌套元素的项目时，它应该展开，这工作正常但是有了这个，展开图标也应该变成折叠。 当我试图改变它时，它会改变它的所有元素。

编码我所做的：

const collapseView = (locationArray: any): any => {
return locationArray?.map((locationRight: any, index: number) => (
  <View key={locationRight?.accountLocationUid}>
    <View>
      <Collapse>
        <CollapseHeader>
          <View style={styles.itemRow}>
            {/* {locationRight?.children?.length > 0 ? <View><Text>{expanded ? 'Yes' : "No"}</Text></View> : null} */}
            {locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -10 }}
              size={24}
              color="black"
              name={expanded ? "chevron-right" : "chevron-down"} /> : null}
            <Text
              // onPress={() => setExpand(!expanded)}
              numberOfLines={1}
              style={styles.locationName}>
              {locationRight?.locationName}
            </Text>
            <PaperButton style={styles.paperButton}
              mode='outlined'
              color='#263238'
              uppercase={false}
              onPress={() => handlePermission(locationRight?.accountLocationUid)}>
              {_.isUndefined(permission) ? 'Allow' : getPermissionValue(locationRight?.accountLocationUid)}
            </PaperButton>
          </View>
          {/* {console.log("child " + locationRight.locationName + " and size is " + locationRight.children.length)} */}
        </CollapseHeader>
        <CollapseBody>
          <View style={{ marginLeft: 15 }}>
            {!_.isNull(JSON.stringify(locationRight?.children) || locationRight.children.length > 0)
              && collapseView(locationRight?.children)}
          </View>
        </CollapseBody>
      </Collapse>
    </View>
  </View>
))
}

使用以下代码，我试图在展开和折叠时更改图标。

{locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -5 }}
              size={24}
              color="black"
              name={expanded ? "chevron-right" : "chevron-down"} /> : null}

唯一的问题是，如果我展开为真，那么图标会更改每个项目而不是特定的折叠/展开项目。 如何获得特定项目的事件？ 我正在使用的库是Accordion-Collapse-react-native 。

Answer 1

我必须保存正在折叠的项目的索引或 ID。 所以改变onPress方法如下，并创建一个新的 state 来存储索引！

//ON TOP
const [currentIndex,setCurrentIndex]=useState(0);
// Down on the text component
onPress={() => setCurrentIndex(index)}

渲染时你可以使用索引来检查它是展开还是折叠

name={currentIndex === index ? "chevron-right" : "chevron-down"}