如何使用 Redux 在 Flatlist 中创建无限滚动？

Question

ReactNative 新手，我正在尝试使用无限滚动的平面列表。但是，问题似乎是重新渲染整个列表，而不是仅将新项目渲染到列表底部。如何解决？

  const ActsPreviewScreen = ({ navigation }) => {
  const dispatch = useDispatch()
  const fetchActsPreview = () => dispatch(getActsPreview(page))
  const [page, setPage] = useState(1)

  useEffect(() => {
    console.log('requestToServer')
    fetchActsPreview(page)
  }, [])

  const { actsPreview } = useSelector(state => ({
    ...state.act,
    attributes: { ...state.attributes },
  }))

  const handleLoadMore = () => {
    setPage(page + 1)
    console.log('loadmore')
    fetchActsPreview(page)
  }

return (
    <View>
      <View>
        <FlatList
          data={actsPreview}
          keyExtractor={item => item.id.toString()}
          renderItem={renderItem}
          onEndReached={handleLoadMore}
          onEndReachedThreshold={0.5}
        />
      </View>
    </View>
  )

Act Preview 是一个 Acts 数组。 API 给出 ​​/ 行为一个包含 10 个行为的数组。分页可通过“?Page =”参数获得。 /acts/{:id} 提供有关该行为的扩展信息。字段都包含在属性中。

当前状态树：

▼act: {
  
  ▼act: {
  ▶attributes: {additionUrls, additions: null, city, collect: false, crime: false…}
  id: "154523"
  type: "act"
  }
  
  ▼actsPreview: [
  ▼0: {
    ▶attributes: {city, customer, date: 2021-10-15, expert: null, id: 154523…}
    id: "154523"
    type: "act_preview"
    }
  ▶1: {attributes, id: 154522, type: act_preview}
  ▶2: {attributes, id: 154521, type: act_preview}
  ▶3: {attributes, id: 154520, type: act_preview}
  ▶4: {attributes, id: 154519, type: act_preview}
  ▶5: {attributes, id: 154518, type: act_preview}
  ▶6: {attributes, id: 154517, type: act_preview}
  ▶7: {attributes, id: 154516, type: act_preview}
  ▶8: {attributes, id: 154515, type: act_preview}
  ▶9: {attributes, id: 154514, type: act_preview}
  ]
  }

Answer 1

我假设actsPreview 是state.attributes 的一个属性，而state.act 是最新获取的页面？

我希望这会将新值添加到列表视图中，以确保我需要更多代码。

  const { actsPreview } = useSelector(state => ({
    ...state.act,
    ...state.attributes
  }))

但是你的实现使用了一个无序的对象，你应该考虑使用一个数组来代替。

  const actsPreview  = useSelector(state => ([
    ...state.act.actsPreview,
    ...state.attributes.actsPreview
  ]))



  const { actsPreview } = useSelector(state => ({ // actsPreview is a property of state.act ?
    ...state.act,
    attributes: { ...state.attributes }, // Is attributes ever used?
  }))