CODEWITHSUNDEEP
javascriptreactjs
Jihye.Park
Jihye.Park

Reputation: 1

How to re-render React Component when outside function call

I created a class object that stores the postlist. When the post was updated, the Pub-Sub pattern subscription function was registered.

class PostLoad extends PubSub { 
  store = [];
  constructor (){
    super();
    this.connectSocket = connectSocket(this.projectUid, async (type, post) => {
      console.log('Socket HOOK', type, post);
      if (type === 'insert') await this.newPostPush(post);
      if (type === 'update') {
        const {deleted} = post;
        if (deleted) await this.deletePostInStore(post.id);
      }
    });
  }
  async postLoad () {
   // ...API LOAD
   const value = axios.get('');
   this.store = value;
  }
  private async newPostPush(post: HashsnapPostItem) {
    if (post.type === 'video') return;
    const storeItem = {...post, img: await loadImage(post.url)} as HashsnapPost;
    this.store.unshift(storeItem);
    if (this.store.length > this.limit) this.store.splice(this.limit);
    this.emit('insert', {post: storeItem, store: this.store});
  }
  private deletePostInStore(targetId: number) {
    this.store.push(...this.store.splice(0).filter(({id}) => id !== targetId));
    this.emit('delete', {postId: targetId, store: this.store});
  }
}

React component executes events registered in Pub-Sub, When the post was updated, the status value was changed, but there was no change.

const PostList = () => {
  const [postList, setPostList] = useState([]);
  const postLoad = store.get('postLoad'); // PostLoad Class Object

  useEffect(() => {
   setPostList(postLoad.store);
  }, []);

  postLoad.on('delete', (payload) => {
    setPostList(postLoad.store);
  })

  postLoad.on('insert', (payload) => {
    setPostList(postLoad.store);
  })

  return <div>
   {postList.map((post, i) => {
     return <div key={`post-${i}`}></div>
   })}
  </div>
}

What I want is that when the Pus-Sub event is executed, the status value changes and re-rends.

Upvotes: 0

Views: 317

Answers (1)

erwei tang
erwei tang

Reputation: 11

   async postLoad () {
       // ...API LOAD- axios is a async func, need await this
       const value = await axios.get('');
       this.store = value;
      }

    postLoad.on('delete', (payload) => {
        setPostList(postLoad.store);
    })

    postLoad.on('insert', (payload) => {
        setPostList(postLoad.store);
    })

    // thest two register on postLoad will repeat many times, just use hook useEffect, if postLoad always change, useRef, so the right code is below

const PostList = () => {
  const [postList, setPostList] = useState([]);
  const {current: postLoad} = useRef(store.get('postLoad'));

  useEffect(() => {
      setPostList(postLoad.store);
      postLoad.on('delete', (payload) => {
        setPostList(postLoad.store);
      })
      postLoad.on('insert', (payload) => {
        setPostList(postLoad.store);
      })
      return () => {
        // please unregister delete and insert here
      }
  }, [postLoad]);

  return <div>
   {postList.map((post, i) => {
     return <div key={`post-${i}`}></div>
   })}
  </div>
}

Upvotes: 1

Related Questions