React Native - วิธีอัปเดต FlatList ของโพสต์ (ไลค์ใหม่, ... )

Question

บทนำ

ฉันกำลังพัฒนารายการโพสต์ซึ่งซ้อนอยู่ในแฟลตลิสต์ที่มีการดึงเพื่อรีเฟรชและแต่ละโพสต์ (แสดงผลในการ์ด) มีอวาตาร์ของผู้ใช้ที่อัปโหลด นอกจากนี้ยังเป็นไปได้ที่ผู้ใช้จะเปลี่ยนรูปประจำตัวได้ดังนั้นฉันจึงต้องอัปเดตโพสต์ FlatList ด้วยรูปประจำตัวของผู้ใช้ใหม่

ฉันได้อ่านบางอย่างเกี่ยวกับอุปกรณ์เสริมของ ExtraData แต่ไม่ได้ผลในกรณีของฉัน

รหัส

// Posts Screen
export default function Posts(props) {
   const {
      userData: {
         username,
         avatar
      }
   } = props;

   const [data, setData] = useState([]); // [{ avatar, username, photoUri, likes }, ...]

   let previousAvatar = useRef(avatar).current;

   // ... Fetch the data
 
   // This is the wrong(?) stuff I am doing to update the FlatList
    useEffect(() => {
     if (previousAvatar !== avatar) {
       // For each post, change the avatar
       setPosts(
         posts.map((post) => ({
           ...post,
           avatar: avatar,
         }))
       );

       // Save the new avatar
       previousAvatar = avatar;
     }
   }, [ownerData]);


   return (<FlatList data={data} renderIt... />)
   
}

สิ่งที่ฉันกำลังทำ

เมื่อฉันตรวจพบว่าผู้ใช้เปลี่ยนรูปประจำตัวฉันจะแก้ไขข้อมูลที่ส่งผ่านไปยัง FlatList โดยเปลี่ยนรูปประจำตัว ฉันคิดว่ามันไม่ดีเนื่องจากอาจมีโพสต์ 100K ในรายการ ...

นอกจากนี้ฉันจำเป็นต้องอัปเดต Flatlist เมื่อมีการชอบใหม่ชื่อผู้ใช้ใหม่ ... ดังนั้นฉันคิดว่าสิ่งนี้ใช้ไม่ได้

สิ่งที่ฉันได้ลอง

// Posts Screen
export default function Posts(props) {
   const {
      userData
   } = props;

   ...
    
   return <FlatList data={data} extraData={userData} ... />

}

ในเอกสารระบุว่า "การส่ง extraData ไปยัง FlatList ทำให้เราแน่ใจว่า FlatList จะแสดงผลอีกครั้งเมื่อสถานะเปลี่ยนไป" แต่สำหรับฉันมันไม่ได้ผลเนื่องจากได้รับข้อมูลผู้ใช้ผ่านอุปกรณ์ประกอบฉาก

ความคิดใด ๆ ? ขอขอบคุณ.

Answer 1

flatList จะแสดงข้อมูลไม่ใช่ extraData ลองตั้งค่า extraData เป็นบูลีนและย้อนกลับค่าบูลีนทุกครั้งที่คุณต้องการอัปเดตรายการ