重新渲染 FlatList 的项目答案

【问题标题】：Re-render items of a FlatList重新渲染 FlatList 的项目
【发布时间】：2021-02-07 02:58:46
【问题描述】：

我正在尝试在 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>
)

【问题讨论】：

很多问题：（1）你立即调用addMoreItems而不是按下时，（2）clickedItems没有存储在状态或React ref中，所以它被清除/重置渲染，(3) React 状态更新是异步的，因此在hasBeenClicked 中更新状态不允许您返回排队的isClicked 状态值，(4) 您的渲染函数不应该有副作用，例如更新组件状态.

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

【解决方案1】：

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

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

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

【讨论】：