Question

我有一个React组件，它从API数据中获取10个图像。我想使用无限滚动来加载更多10张图片。

我要做的是聆听到达网站底部的事件，并仅在控制台中发布嵌套10图像的新网址 :)

我应该专注于获取我的网址中的所有数据，还是专注于相关功能的渲染和使用？

或者问题可能是因为我在componentDidMount中获取数据并且我不知道如何更新整个状态？

import { ObjectId } from "mongodb"
import pubsub from "../../utils/pubsub"

export default {
  // ...
  Mutation: {
    createEvent: async (_, data, { mongo: { Events }, user }) => {
      const newEvent = data.event
      newEvent.ownerId = user._id
      const response = await Events.insert(newEvent)
      const [_id] = response.insertedIds
      newEvent._id = _id
      pubsub.publish("Event", { Event: { mutation: "CREATED", node: newEvent } })
      return newEvent
    },
  },
  Subscription: {
    Event: {
      subscribe: () => pubsub.asyncIterator("Event"),
    },
  },
  Event: {
    id: event => event._id.toString(),
    owner: async (event, _, { mongo: { Users } }) => Users.findOne({ _id: event.ownerId }),
    bookings: async (event, _, { mongo: { EventTickets } }) =>
      EventTickets.find({ eventId: event._id }).count(),
    tickets: async (event, _, { mongo: { EventTickets } }) =>
      EventTickets.find({ eventId: event._id }).toArray(),
  },
}

Answer 1

在我看来，section的值将是映射空数组的结果，因为this.state.image将为空，直到componentDidMount中的fetch完成为止。尝试在渲染函数中添加一个检查，如下所示：

let section;
if (this.state.images.length === 0) section = <p>Loading...</p>;
else section = this.state.image.map((elem, i, page) => {
  ...your code goes here...
});

这样它至少应该在初始渲染时正确更新

React中的无限滚动与之前更改的setState无效

1 个答案: