使用 react-infinite-scroll-component

问题描述

我想在使用滚动时将获取数据渲染到每个网格部分，

在标题部分它有效，但其他不起作用。

here is the header section

标题部分在右侧滚动。

但是其他部分网格组件看不到那个滚动
other section grid components

它有滚动条，但没有滚动条..如何修复它？

这是我的代码。

import React from 'react';
import styled from 'styled-components';
import GlobalStlyes from "../GlobalStyle"
import Header from "../templates/top/Header"
import Combine from "../templates/Combine";

function App() {
  return (
    <Page>
      <GlobalStlyes />
      <Header />
      <Combine />
    </Page>
  );
}

const Page = styled.div`
  display: grid;
  border: 5px solid;
  border-color: black;
  grid-template-rows: 10vh 90vh;
  margin: 0px;
  grid-gap: 10px;
`
export default App;

import React from 'react';
import styled from 'styled-components';
import PrivateClip from "./contents/PrivateClip"
import Publicclip from './contents/Publicclip';
import InBox from './contents/InBox';
import KanbanBoard from './contents/KanbanBoard';

const Combine = () => {
    return (
        <Combinestyle>
            <PrivateClip />
            <Publicclip />
            <InBox />
            <KanbanBoard />
        </Combinestyle>
    );
};

const Combinestyle = styled.div`
    display: grid;
    border: 5px solid;
    border-color: black;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: 20vh; 70vh;
    margin: 0px;
    grid-gap: 10px;
`

export default Combine;

import React,{ useState,useEffect } from 'react';
import styled from "styled-components";
import InfiniteScroll from "react-infinite-scroll-component";
import LoginGoogle from "../../atoms/LoginGoogle";
import axios from 'axios'

const Header = () => {
    const [addData,setAddData] = useState(2);
    const [prevData,setPrevData] = useState(0);
    const [data,setData] = useState(addData); // 2 or 4
    const [hasMore,setHasMore] = useState(true);
    const [items,setItems] = useState([] as any);

    const fetchMoreData = () => {
        setTimeout(() => {
            axios.get(`https://koreanjson.com/todos`)
                .then((res) => {
                    let fourData = res.data.slice(prevData,data);
                    setItems([...items,...fourData]);
                    setPrevData(prevData + addData);
                    setData(data + addData);
                })
        },1000);
    }
    return (
        <header style={{ overflow: "scroll" }} id="scrollHeader">
            <p>여기서 시작</p>
            <InfiniteScroll
                dataLength={items.length} //This is important field to render the next data
                next={fetchMoreData}
                hasMore={hasMore}
                loader={<h4>Loading...</h4>}
                scrollableTarget="scrollHeader"
            >
                {items && items.map((data: object | any,i: number) => {
                    let title = data.title;
                    return (
                        <div key={i}>
                            {title}
                        </div>
                    )
                })}
            </InfiniteScroll>
        </header>
    );
}


export default Header;

import React,{ useState } from 'react';
import InfiniteScroll from "react-infinite-scroll-component";
import styled from "styled-components"
import axios from 'axios';


const InBox = () => {
    const [plusData,setPlusData] = useState(2);
    const [lastData,setLastData] = useState(0);
    const [fetchData,setFetchData] = useState(plusData);
    const [hasMores,setHasMores] = useState(true);
    const [content,setContent] = useState([] as any);

    const handleFetch = () => {
        setTimeout(() => {
            axios.get('https://koreanjson.com/users')
                .then((res) => {
                    let twoData = res.data.slice(lastData,fetchData)
                    setContent([...content,...twoData]);
                    setLastData(lastData + plusData);
                    setFetchData(fetchData + plusData);
                })
        },1000)
    }
    return (
        <InBoxSection id="scrollSection" style={{ overflow: "scroll" }}>
            <p>여기서부터</p>
            <InfiniteScroll
                dataLength={content.length}
                next={handleFetch}
                hasMore={hasMores}
                loader={<p>로딩중입니다.</p>}
                scrollableTarget="scrollSection"
            >
                {content && content.map((data: object | any,i: number) => {
                    let body = data.body
                    return (
                        <div key={i}>
                            {body}
                        </div>
                    )
                })}
            </InfiniteScroll>
        </InBoxSection>
    );
};

const InBoxSection = styled.section`
    grid-column: 1;
    grid-row: 2/3;
    border: 1px solid;
    border-color: green;
`

export default InBox;

抱歉，这是我在 Stackoverflow 中的第一个问题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）