Reactjs React useState： unexpected behavior when partitioning infinite feed by time

我忽略了setState()会导致重新渲染，因此每次都会使timeCheck()返回false.为了获得时间分区提要所需的行为，我计算了在获取帖子时哪些索引应该预先设置时间字符串，然后如果元素索引在这个数组中，我将shouldDisplay()设置为true.这是我的密码

Solution

export function InfiniteFeed(props: InfiniteFeedProps) {
    const [page, setPage] = useState(0);
    const [shouldDisplay, setShouldDisplay] = useState(true)
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(false);
    const [posts, setPosts] = useState<Post[]>([])
    const [hasMore, setHasMore] = useState(false);

    const [timePartitions, setTimePartitions] = useState<number[]>([]) // indices of time buckets
    const now = DateTime.local({zone: 'utc'});
    // using luxon library for handling time and using
    // Duration api to account for the variable month lengths
    const timeBuckets = [
        now.minus(Duration.fromObject({month: 1})).toMillis(),
        now.minus(Duration.fromObject({week: 1})).toMillis(),
        now.minus(Duration.fromObject({day: 1})).toMillis()
    ];

    // have omitted useRef dom observer logic
    useEffect(() => {
        // ...
        CoreApi().post<GetEventsResponse>('posts', request)
            .then((res) => {
                const allPosts = [...posts, ...res.data.posts]
                setPosts(allPosts);
                calculateTimePartitions(allEvents)
                // ...
            })
    }, [page])

    const shouldDisplay = (index: number): boolean => {
        return timePartitions.find(num => num == index) != undefined
    }

    // calculate the indexes where we want to prepend time banner
    const calculateTimePartitions = (eventList: NewsEvent[]) => {
        let indexes = [];
        let intervals = timeBuckets
        for (let i = 0; i < posts.length; i++) {
            if (eventList[i].eventTimestamp < intervals[intervals.length - 1] ) {
                intervals.pop()
                indexes.push(i);
            }
        }
        setTimePartitions(indexes)
    }

    return (
        <div>
            <FeedWrapper>
                <Banner title="Infinite Feed"/>
                <ul style={{padding: 0}}>
                    {posts.map((post, i) => (
                        <FeedElement
                            key={post.id}
                            ref={(post.length === i + 1) ? lastEventElementRef : () => null}
                            id={post.id}
                            display={shouldDisplay(i)}  // if true, element prepends "posted yesterday"
                            // other props
                        />
                    ))}
                </ul>
            </FeedWrapper>
            <div></div>
        </div>
    );
}

Feed element logic

export const FeedElement = forwardRef<any, NewsEvent & FeedElementProps>((props: Post & FeedElementProps, ref) => {

    
    // can be more expensive
    const getTimeBucket = () => {
        const nowMillis = DateTime.local({zone: 'utc'})
        const eventTime = DateTime.fromMillis(props.eventTimestamp, {zone: 'utc'})
        const interval = Interval.fromDateTimes(eventTime, nowMillis)

        if (interval.length('day') > 1 && interval.length('day') < 2) {
            return 'Posted yesterday'
        }
        if (interval.length('day') > 2 && interval.length('week') < 1) {
            return 'Posted this week'
        }
        if (interval.length('week') > 1 && interval.length('month') < 1) {
            return 'Posted this month'
        }
        else if (interval.length('month') > 1) {
            return 'Posted over a month ago'
        }
        else {
            return '';
        }
    }

    return (
                <div>
                    {props.display ? (
                        <Banner title={getTimeBucket()} />
                    ) : (<></>)}
                    <div>
                        <li>
                        {/*other stuff*/}
                        </li>
                    </div>
                </div>

    )},
);