Кнопка отображается неправильно в ReactJS

Question

Я пытаюсь сделать нумерацию страниц для своей веб-страницы, я установил ограничение до 10 элементов на странице. Проблема в том, что всякий раз, когда я добавляю 11-й элемент, кнопка «Новая страница» не отображается. Она появляется только после добавления 12-го элемента.

Есть предложения?

Функция добавления:

    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()

        }
    }

Нарезка при рендеринге:

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

функция setPageCount:

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

Answer 1

Он будет работать асинхронно, поэтому сделайте его синхронным с использованием обещания или async / await.

Эта ссылка ниже содержит документацию по asyn c.

Щелкните здесь

Надеюсь, это будет полезно для вашего процесса.

Answer 2

Почему вы добавляете сюда лишнюю 1 const setPageCount = Math.ceil(todos.length / 10 ) + 1. Я думаю, вам следует использовать floor вместо ceil. Как видите, у вас есть 1 задача. Math.ceil(1/10) + 1 = 2, что означает, что у вас есть только 1 элемент, но вы показываете 2 страницы.