List using local component doesn't update after new items added

1

I’m using a local component for a layout of items rendered via .map…as follows:

${posts.map((post, index) => $h`
    <${PostCard} post=${post} index=${index} />
`)}

Before I started using the component for the layout, the map function would re-render the posts list whenever I called $update();. But after switching to a component, the posts list does not re-render when I call $update();. New items are not displayed, and deleted items do not disappear.

Is there something I’m missing?

2

here => trusting-burnell-r1brlr - CodeSandbox

1 Like
3

@deejay Thanks. The only difference I saw was that you wrapped the map inside

${[posts].filter(i => i.length).map(i => $h`

`)}

I tried that and it doesn’t have any effect. Same behavior as before. I’m not sure I understand why that would be necessary.

Does it matter that I’m including the component from a file?

import PostCard from './components/internal/PostCard.f7';

The component itself is

<template>
  <div class="card post-card ${post.type}" key=${index}>
    // post layout
  </div>
</template>
<script>
export default function (props, {$, $h, $update, $f7 }) {
    const post = props.post;
    const index = props.index;

    return $render;
 }
</script>
4

@deejay I kept my original structure and added an additional $update() call at the beginning of my getLatestPosts() function. That seems to have solved the problem.

It’s strange, because I was already calling $update() at the end of getLatestPosts(), so I’m not sure why calling twice would make a difference. But it works!

5

not necessary.

no.

if you have to call it twice, then it does’t really work.
probably you are doing something wrong.
need to see your real code

6

@deejay I think I know what’s happening. When I add a new post, I trigger a refreshPosts() function which empties the post array, re-initializes some infinite scroll variables and then calls getLatestPosts(). I didn’t have the $update() in the refreshPosts function since it’s called at the end of getLatestPosts()…but, it seems that when using a component, the update at the end of getLatestPosts wasn’t causing the list to refresh…my guess is because the index values were the same. So, I added $update() to refreshPosts(), just after I empty the posts array.

Here’s my setup

let posts = [];
let lastPostTimestamp;
let allowInfinite = true;
let hasMorePosts = true;

const refreshPosts = ( e, done ) => {  //also called by pull-to-refresh
  posts = [];
  lastPostTimestamp = null;
  allowInfinite = true;
  hasMorePosts = true;
  $update(); // necessary for the list to refresh when using local component for layout
  getLatestPosts();
  if (done) {
   done();
  }
}

const getLatestPosts = (  ) => { 
  if (!allowInfinite) return;
  allowInfinite = false;

  ... // query for latest posts

  var counter = 0
  queryResults.forEach( async (result) => {
    ... // process the results (including some async queries to get user data)
    posts.push(post);

    counter ++;
    if (counter == queryResults.length ) {
      $update();
    }
  });

  if ( queryResults.length < queryLimit ) {
    hasMorePosts = false;
    $update();
    return;
  }

  allowInfinite = true;
  $update();
}

$onMounted(() => {
  getLatestPosts();
});

$on('pageInit', (e, page) => {
  $f7.on('postCreated', function () {
    refreshPosts();
  });
  $f7.on('postDeleted', function () {
    refreshPosts();
  });
})
7

weird logic.

if you happy with it, then i’m not gonna say anything.
but, usually when you tell your machine to do something twice => something is wrong.

not really => trusting-burnell-r1brlr - CodeSandbox