React Native状态变更后组件未重新渲染问题求助

你的核心问题出在FlatList的渲染机制上：FlatList默认是PureComponent，只会监听data属性的变化来决定是否重新渲染列表项。而selectedItems是独立于data的状态，FlatList无法感知它的变更，所以即使你更新了selectedItems，卡片组件也不会触发重新渲染。

修复步骤： #

1. 给FlatList添加extraData属性
   把selectedItems传入extraData，告诉FlatList这个状态变化时需要重新渲染所有列表项：

   <FlatList
     refreshing={loading}
     onRefresh={getTodoList}
     style={styles.list}
     data={items}
     renderItem={renderCard}
     keyExtractor={(item) => item.id}
     extraData={selectedItems} // 新增这一行
   />
   

2. 可选优化：用useCallback包裹渲染函数
   把renderCard用useCallback包裹，避免每次组件重渲染时创建新的函数实例，提升性能：

   const renderCard = useCallback(({ item }) => {
     return (
       <TouchableHighlight
         onLongPress={() => {
           setSelectedItems((prev) => [...prev, item.title]);
         }}
         underlayColor="gray"
       >
         <Card
           style={
             selectedItems.includes(item.title)
               ? styles.cardSelected
               : styles.cardNotSelected
           }
         >
           <Card.Title style={styles.cardTitle}>{item.title}</Card.Title>
         </Card>
       </TouchableHighlight>
     );
   }, [selectedItems]);
   

额外注意点： #

• 确保item.title是唯一的，如果有重复标题，会导致多个卡片同时被选中。如果标题可能重复，建议改用item.id来标记选中状态：

  // 长按更新逻辑改为用id
  setSelectedItems((prev) => [...prev, item.id]);
  // 样式判断也改为id
  selectedItems.includes(item.id) ? styles.cardSelected : styles.cardNotSelected
  

• 检查items是否是通过useState管理的响应式状态，如果是从外部传入或异步获取的，要确保它的变更能触发组件重渲染。

内容的提问来源于stack exchange，提问作者JSmambo