Question

我创建了一个显示9个图像的网格布局。我从API中获取图像：

  getImages() {
    let url =
      'URL';
    fetch(url)
      .then(response => response.json())
      .then(data => this.setState({ posts: data.posts, isLoading: false }));
  }

  componentDidMount() {
    this.getImages();

  }

底部是一个用于加载更多图像的按钮。如果我点击按钮，getImages（）函数会再加载9个图像。但我有两个问题。第一个问题是列＆＃34;跳＆＃34;从三列开始几秒钟，两列和后面。第二个问题是我只想加载新图像。这意味着9个初始图像应该始终可见，如果我点击按钮而不是图像下方应该出现一个加载微调器，直到下一个图像被加载并准备好显示。

Answer 1

合并您的数组，但首先过滤重复项。由于我不知道posts的确切数据结构，我将假设下面的示例中有一个唯一的id属性：

.then(data => {
    const { posts } = this.state;

    // Extract post ids that have already been stored in state.
    // Then, filter your response posts based on their id not existing in the postIds array.
    const postIds = posts.map(p => p.id);
    const newPosts = data.posts.filter(p => postIds.indexOf(p.id) === -1);
    const mergedPosts = [ ...posts, ...newPosts ];

    this.setState({ posts: mergedPosts });
});

我不确定导致列跳跃的原因 - 我想我需要更多关于整体布局/ css的信息。

React仅加载新数据

1 个答案: