“react-infinite-scroll-component”不触发下一个函数

Question

我正在使用react-infinite-scroll-component来实现无限滚动组件。组件的配置为：

<div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}>
       <InfiniteScroll
         dataLength={texts.length}
         next={getText}
         hasMore={true}
         loader={<h5>Loading...</h5>}
         endMessage={<p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>}
         scrollableTarget="scrollableDiv"
         >
         {<Texts texts = {texts}/>}
         </InfiniteScroll>
</div>

其中 texts 只是一些文本对象的状态数组；

const [texts, setTexts] = useState([])

这是在 next 中调用的

getText

方法：

const getText = async ()=>{

        const res = await axios.get("http://localhost:3001/api/sth",{
            params: {
                ids: followings.map(i => i.id),
                str_ids: followings.map(i => i.str_id)
              },
              paramsSerializer: params => {
                return qs.stringify(params)
              }
        });

        let str_ids_res = res.data.map(i => i.string_id)
        let texts_res = res.data.map(i => i.texts)
        console.log(texts_res)

        const filtered_res = //some processing here on texts_res
        /* eslint eqeqeq: 0 */
        if(!arrayIsEqual(filtered_res,texts)){
            console.log("Not equal")
            // append arrays to a array state
            setTexts((prevtexts) => prevtexts.concat([...filtered_res]))
        }

    }

await axios.get("http://localhost:3001/api/sth")

总是从数据库返回两个不同的文本，所以

setTexts

应该总是被调用。

组件是来自语义 UI 的卡片组件。

const Texts = ({texts}) =>{
    return (
        <>
            {texts.map(text =>(
                <div key={text.id}>
                    <Card>
                        <Card.Content>
                            <Card.Description>
                            {text.full_text}
                            </Card.Description>
                        </Card.Content>
                    </Card>
                </div>
            ))}
        </>
    );
}

即使我的

InfiniteScroll

 变量设置正确，

Next

组件也只会触发

datalength

一次。
附言。文本最初是空的，所以当我启动应用程序时，只会调用“正在加载...”

Answer 1

经过一些实验，将

height = {some height}

作为 props 传递给 InfiniteScroll 就可以了..

<div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}>
                                    <InfiniteScroll
                                    dataLength={tweets.length}
                                    next={handleScrolling}
                                    hasMore={!isEnd}
                                    loader={<h5>Loading...</h5>}
                                    scrollThreshold={1}
                                    height={300}
                                    endMessage={
                                        <p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>
                                    }
                                    scrollableTarget="scrollableDiv"
                                    >
                                    {<Tweets tweets = {tweets}/>}
                                    </InfiniteScroll>
</div>

Answer 2

请不要使用空数组初始化“texts”，您必须使用一些对象数组（例如 10 或 20）初始化“texts”数组。

在代码的初始渲染中（第一次）。你可以直接在

中触发一个API

useEffect(()=>{
  // make API call which your firing in the next call function
},[])

因此您的组件进行初始化，然后它将开始按预期运行。

为了便于理解，请参考“代码沙箱”中的示例 https://codesandbox.io/s/elated-danny-k4hylp?file=/src/index.js

Answer 3

我有问题，在开发中无限滚动有效，但在生产中不行，我的意思是，下一个功能在生产中不会触发，但在开发中正常工作，有类似的问题吗？