使用 SWR 条件获取和 react-bootstrap Accordion

Question

尝试将 youtube cmets 加载到无限加载组件中（使用 npm）

由于无限加载组件是父 Accordion 组件的子组件（来自 react-bootstrap），而我想要实现的是仅在 Accordion 获取时使用 useSWR 获取点击（打开）。

我尝试的是使用 useSWR 条件，以便仅在状态“show”为真时获取，这是在函数内部设置的：

const showComments = () => {
    setShow(true)
    if (comments) {
      setCommChunks(_.chunk(comments.comm, 10))
      setCommList(commChunks[counter])
    }
  }

在 Accordion.Toggle onClick 事件上调用。

但是我只能在点击 Accordion 两次后才能显示 cmets，这是为什么呢？

我的代码是：

import { useState, useEffect } from 'react'
import { Row, Col, Button, Accordion } from 'react-bootstrap'
import * as _ from 'lodash'
import useSWR from 'swr'
import { MdUnfoldMore } from 'react-icons/md'
import InfiniteScroll from "react-infinite-scroll-component"
import Comments from './Comments'

const siteurl = process.env.NEXT_PUBLIC_SITE_URL

export default function VideoComments({ video }){
    
  const [show, setShow] = useState(false)
  const [counter, setCounter] = useState(0)
  const [commList, setCommList] = useState(null)
  const [commChunks, setCommChunks] = useState([])

  const showComments = () => {
    setShow(true)
    if (comments) {
      setCommChunks(_.chunk(comments.comm, 10))
      setCommList(commChunks[counter])
    }
  }

  const fetcher = (...args) => fetch(...args).then(res => res.json())
  const { data: comments, error } = useSWR(show ? `${siteurl}/api/c/${video.id}` : null, fetcher)
  
  // useEffect(() => {
  //   if (comments) {
  //     commChunks = _.chunk(comments.comm, 10)
  //     setCommList(commChunks[counter])
  //   }
  // },[comments])

  const fetchMoreData = () => {
    const newCounter = counter + 1;

    // loaded all, return
    if (commChunks[newCounter] === undefined || commChunks[newCounter] == null) {
        return;
    }

    const newCommList = [
        ...commList,
        ...commChunks[newCounter]
    ]
    setCommList(newCommList)
    setCounter(newCounter)
  }

  return (
    <div>
      <Accordion>
        <Row>
          <Col xs={12}>
            <Accordion.Toggle as={Button} onClick={() => {showComments()}} variant="link" eventKey="0"><div><span>Comments</span></div></Accordion.Toggle>
          </Col>
        </Row>
        <Accordion.Collapse eventKey="0">
          <div id="commentsBox" style={{maxHeight: '300px', overflowY: 'auto'}}>
            <Col xs={12}>
              {commList &&
                <InfiniteScroll
                    dataLength={commList.length}
                    next={fetchMoreData}
                    hasMore={true}
                    scrollableTarget="commentsBox"
                >
                  <Comments data={commList} />
                </InfiniteScroll>
              }
            </Col>
          </div>
        </Accordion.Collapse>
      </Accordion>
    </div>
  );
}

编辑：如下所示，我重新激活了 useEffect，但仍需要两次点击 Accordion

const showComments = () => {
    setShow(true)
    if (comments) {
      setCommChunks(_.chunk(comments.comm, 10))
      setCommList(commChunks[counter])
    }
  }

  const { data: comments } = useSWR(show ? `${siteurl}/api/c/${video.id}` : null, fetcher)

  useEffect(() => {
    if (comments) {
      setCommChunks(_.chunk(comments.comm, 10))
      setCommList(commChunks[counter])
    }
  },[comments])

Answer 1

问题在于您的useEffect，在修改commChunks 状态后立即调用setCommList(commChunks[counter]) 不会有更新的值。在 React 中设置状态是一个异步操作（参见 React setState not updating immediately）。

您应该将 cmets 保存在块范围的变量中，并使用它来连续更新两个状态。

useEffect(() => {
    if (comments) {
        const commentsChunks = _.chunk(comments.comm, 10)
        setCommChunks(commentsChunks)
        setCommList(commentsChunks[counter])
    }
}, [comments])

Answer 2

您评论了处理 cmets 的 useEffect：

  // useEffect(() => {
  //   if (comments) {
  //     commChunks = _.chunk(comments.comm, 10)
  //     setCommList(commChunks[counter])
  //   }
  // },[comments])

会发生什么：

1. 你点击手风琴，showComments 被调用
2. show 设置为 true，但由于 comments 未定义，commList 和 commChunks 未设置
3. 组件重新渲染，现在useSWR可以使用url获取数据了
4. 组件在抓取完成后重新渲染，现在comments 包含数据
5. 您第二次点击 Accordion，showComments 被调用
6. show 设置为 true，这次设置了 commList 和 commChunks
7. 组件使用InfiniteScroll 和Comments 重新渲染