Question

我正在尝试在 React-Native 中制作一个可扩展的 FlatList。当按下“TouchableOpacity”组件时，它现在应该显示描述（item.Beschreibung）。我尝试通过将 renderItem 函数呈现的每个项目添加到一个数组（如果它已被按下）来做到这一点。它以某种方式不起作用，因为不会再次检查“renderItem”中的条件。我该如何解决这个问题？

const clickedItems = []
const [isClicked, setIsClicked] = useState(false)

const addMoreItems = (x) => {
    if (hasBeenClicked(x.Name) == false){
        clickedItems.push(x.Name)
    } else{
        clickedItems.splice(clickedItems.indexOf(x.Name), 1)
    }
  }

const hasBeenClicked = (x) => {
    if (clickedItems.includes(x) == true){
        setIsClicked(true)
    } else {
        setIsClicked(false)
    }
    return isClicked
}

const renderItem =({item, index})=>{
    if (hasBeenClicked(item.Name) == false){
        return (
            <TouchableOpacity onPress={addMoreItems(item)}><Text>{item.Name}</Text></TouchableOpacity>
        )
    } else {
        return (
            <TouchableOpacity onPress={addMoreItems(item)}>
                <Text>{item.Name}</Text>
                <Text>{item.Beschreibung}</Text>
            </TouchableOpacity>
        )
    }
}

return (
    <View style={styles.container}>
        <Text style={{fontSize:18}}>Informationen zur Übung: {kurse[kursIndex].Uebungen[uebungsIndex].Name}</Text>
        <Text></Text>
        <Text style={{textAlign:"justify"}}>{kurse[kursIndex].Uebungen[uebungsIndex].Info}</Text>
        <FlatList  
            data={kurse[kursIndex].Uebungen[uebungsIndex].KognitiveProzesse}
            keyExtractor={item=>item.id}
            renderItem={renderItem}
        ></FlatList>
    </View>
)

Answer 1

React 组件只有在它们的 props 或 state 发生变化时才会重新渲染。

renderItem 函数只会在 kurse[kursIndex].Uebungen[uebungsIndex].KognitiveProzesse 更改时重新评估。

我建议在子组件内移动 isExpanded 状态。创建一个 CognitiveProcessListItem 组件（如果我正确理解您的代码 ?）并在其中添加 [isExpanded, setIsExpanded] = React.useState(false)。

重新渲染 FlatList 的项目

1 个答案: