Как правильно добавить в компонент html а не обновлять его?

Question

[chelkaz]

Сейчас при клике на кнопку показать еще, в таблицу подгружаются новые темы, удаляя все что было в таблице.
Не могу сообразить как при клике на кнопку добавлять в таблицу, а не заполнять заново.
Сейчас я делаю так:
Смысл простой в экшене идет запрос по API и получаю следующие темы по 50 штук.
Но когда нажимаю загрузить еще, то после экшена срабатывает метод loop в tbody, которые протсо рендерит заново. А нужно что бы старое не стирал.

import store from "../store";
import {fetchAllProducts} from "../actions/PoductsActions";
GetProducts = (url, code) => {
    return store.dispatch(fetchAllProducts(url ,code, true)).then(() => {
        console.log('Ok')
    })
}


handleClick = () => {
    this.GetProducts(this.props.products.item.next_page_url, this.props.products.select_sect_code)
}


render() {
    const loop = data => data.map((item) => {
        return (
            <tr key={item.IdProduct}>
                <td>{item.id}</td>
                <td>{item.name</td>
            </tr>
        )
    });
    if (typeof this.props.products.item.data !== 'undefined' && this.props.products.item.data.length > 0 ) {
        return (
       <section>
                <table>
                    <thead>
                        <tr>
                            <th>Код</th>
                            <th>Название</th>
                        </tr>
                    </thead>
                    <tbody>
                    {loop(this.props.products.item.data)}
                    </tbody>
                </table>
                <div onClick={this.handleClick} className={'catalog_list_pagination'}>еще</div>
       </section>
        );
    }
}

Comments

[Модератор]

chelkaz дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

[Анатолий Жаров]

есть возможность показать код actions/PoductsActions?

[Анатолий Жаров]

А нужно что бы старое не стирал.

нет, не нужно. Нужно чтоб в store массив элементов не заменялся, а дополнялся

[chelkaz]

Анатолий Жаров, Я сделал через concat
Но завел в компоненте

constructor() {
        super();
        this.state = {
            product_data: []
        }
    }

В product_data записываются данные из стори, если нажата кнопка показать еще, то идет запись через concat

[chelkaz]

Анатолий Жаров,

export const fetchProducts = (products, select_sect_code, append) => {
    return {
        type: FETCH_PRODUCTS_SUCCESS,
        products,
        select_sect_code,
        append
    }
};

export const fetchAllProducts = (url, code, append) => {
    return (dispatch) => {
        return axios
            .post(url, {products: code})
            .then(response => {
                dispatch(fetchProducts(response.data, code, append))
            })
            .catch(error => console.error(error));
    };

};

[chelkaz]

Анатолий Жаров, Выше мои экшины, там есть параметр append
Если я его ставлю в true то идет через concat

[Анатолий Жаров]

chelkaz, ну и до кучи редьюсер бы посмотреть

[chelkaz]

Анатолий Жаров, Вот редьюсер

import { FETCH_PRODUCTS_SUCCESS } from '../constants/catalog';


const initialState = {
    item: [],
    select_sect_code: [],
    append: false,
}
export default function ProductsReducer(state = initialState, action) {
    switch (action.type) {
        case FETCH_PRODUCTS_SUCCESS:
            return {
                item: action.products,
                select_sect_code: action.select_sect_code,
                append: action.append
            }
        default:
            return state;
    }
}

[Анатолий Жаров]

chelkaz, собсна, да, полученный из ответа products как есть суется в state, в products.data находятся элементы только последней запрошенной страницы. State должен хранить все отображаемые элементы. В редьюсере разберите products и конкатенируйте к имеющимся в state элементам data новые.
Всего за пару дней разобрались)) Впредь лучше прикладывайте к вопросу ссылку на репозиторий

Answer 1

[Роман Будняков]

При первой загрузки сохраняй в state его, отрисовывай , при клике на кнопку, получай новые данные , добавляй их в oldArray и отрисовывай его
state {
oldArray: []
}