ReactJS 中的按钮显示不正确

Question

I'm trying to make pagination for my web-page,I've set limit to 10 items per page. Problem is whenever I'm adding 11th item New page button is not being displayed,It only appears after I add 12th item.

Any suggestions?

Add Function:

    addItem = () => {
        const {addItems, setPageCount} = this.props.actions;
        let userName = localStorage.getItem('username')

        if (this.inpRef.current.value === '') {
            return alert('We dont do that here....')
        } else {
            axios
                .post(`http://localhost:8080/add`, {
                    username: userName,
                    todo: this.inpRef.current.value,
                    checked: false,
                })
                .then((res) => {
                    const {todo, checked, _id} = res.data;
                    addItems(todo, checked, _id);
                    console.log('res', res)
                })
                .catch((err) => {
                    console.log("err", err);
                });
            this.inpRef.current.value = "";
            setPageCount()

        }
    }

Slicing in render:

    const {todos, currentPage, itemsPerPage} = this.props;
    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = todos.slice(indexOfFirstItem, indexOfLastItem);

setPageCount function:

    case actionTypes.PAGE_COUNT:
    const setPageCount =  Math.ceil(todos.length / 10 )
    return {
        ...state,
        pageCount: setPageCount
    }

Answer 1

It will work asynchronously, so make it as synchronous with the use of promise or async/await.

This link below contains documentation on async.

Click this

Hope this will helpful for your process.

Answer 2

Why are you adding extra 1 here const setPageCount = Math.ceil(todos.length / 10 ) + 1 . I think you should use floor instead ceil . As you can see if you have 1 todo item. Math.ceil(1/10) + 1 = 2 which means you have only 1 item but you're showing 2 pages.