Как перерендерить контент после изменения значения стейта?

Question

[Undefined User]

import React, { Component } from 'react'

import Items from '../items'
import Filters from '../filters'
import Service from '../../services'

export default class Shop extends Component {

    KubicService = new Service()

    state = {
        items: {},
        filters: {},
        filtered: 'all'
    }

    componentDidMount() {
        this.KubicService.getCategories()
        .then((result) => {
            this.setState({
                filters: result.data
            })
        })

        this.KubicService.postCatalog()
        .then((result) => {
            this.setState({
                items: result.data
            })
        })
    }

    onFilterClick = (e) => {
        const cats = {...this.state.filters}
        const itemId = e.target.id
        console.log(typeof this.state.items)
         if(itemId == 'all') {
            this.setState({
                filtered: 'all'
            })
         } else {
             this.setState({
                 filtered: cats[itemId].id
             })
         }
        }

    render(){

        return(
            <div>
                <Filters categories={this.state.filters} onFilterClick = { this.onFilterClick }/>
                <Items items = { this.state.items } />
            </div>
        )
    }
}

Вот основной компонент, в котором и хранится стейт. Как вы можете видеть, текущий фильтр также тут. Написал функцию, которая меняет это значение на другое при клике на соответствующий фильтр. А вот перерендерить контент в зависимости от фильтра не получается. Не получается и все тут. Возможно это я тупой(скорее всего), но уже бьюсь над этой задачей 2 день и никак не могу найти решение. Перепробовал все, как мне кажется

import React from 'react'

const Items = (props) => {

        const arr = Array.from(props.items)

        const elements = arr.map((item, index) => {
            let url = ''
            if(item && item.preview_image) {
                url = 'http://******'
                url = url + item.preview_image
            }
            return (
                <div key={index} className='store-item'>
                    <img className='store-item__img' src={url} alt='item img'></img>
                    <h3 className='store-item__title'>{item.name}</h3>
                    <h3 className='store-item_price'>${item.price}</h3>
                </div>
            )
        })
        
        return (
            <div className='store-items'>
                { elements }            
            </div>
        )
    }

export default Items

Вот код самих айтемов

import React from 'react'

const Filters = (props) => {

    const arr = Array.from(props.categories)

    const filters = arr.map((item, index) => {
        return(
            <button className='category btn' key={index} id={index} onClick={ props.onFilterClick }>{item.name}</button>
        )
    })

        return(
            <div className='store-filters'>
                <div className='filter-category'>
                    <div className='categories'>
                    <button className='category-all btn' id="all" onClick={ props.onFilterClick }>all</button>
                        { filters }
                    </div>
                    <select className="filter">
                        <option className='filter-variable'>Price: high to low</option>
                        <option className='filter-variable'>Price: low to high</option>
                    </select>
                </div>
            </div>
        )
    }

export default Filters

А вот и фильтров.

Comments

[Denis Masson]

Так, а какой именно из этих компонентов у Вас не ререндерится?

[Undefined User]

Denis Masson, я уже решил эту проблему. Она заключалась в том, что после нажатия на фильтр на экране не происходило ровным счетом ничего. Решил вот так:

import React, { Component } from 'react'

import Items from '../items'
import Filters from '../filters'
import Service from '../../services'

export default class Shop extends Component {

    KubicService = new Service()

    state = {
        filtered: "all",
        items: {},
        filters: {}
    }

    componentDidMount() {
        this.KubicService.getCategories()
        .then((result) => {
            this.setState({
                filters: result.data
            })
        })

        this.KubicService.postCatalog()
        .then((result) => {
            this.setState({
                items: result.data
            })
        })
    }

    componentDidUpdate() {
        
    }

    onFilterClick = (e) => {
        const cats = {...this.state.filters}
        const itemId = e.target.id
         if(itemId == 'all') {
            this.setState({
                filtered: 'all'
            })
         } else {
             this.setState({
                 filtered: cats[itemId].id
             })
         }
        }

    render(){

        const items = {...this.state.items}
        const arr = Object.values(items)
        let filteredItems = {...this.state.items}
        if(typeof this.state.filtered == 'number') {
            filteredItems = arr.filter((item) => this.state.filtered == item.category.id)
        } else {
            filteredItems = {...this.state.items}
        }

        return(
            <div>
                <Filters categories={this.state.filters} onFilterClick = { this.onFilterClick }/>
                <Items items = { filteredItems  } />
            </div>
        )
    }
}

import React from 'react'

const Items = (props) => {

        const arr = Object.values(props.items)

        const elements = arr.map((item, index) => {
            let url = ''
            if(item && item.preview_image) {
                url = 'http://******'
                url = url + item.preview_image
            }
            return (
                <div key={index} className='store-item'>
                    <img className='store-item__img' src={url} alt='item img'></img>
                    <h3 className='store-item__title'>{item.name}</h3>
                    <h3 className='store-item_price'>${item.price}</h3>
                </div>
            )
        })
        
        return (
            <div className='store-items'>
                { elements }            
            </div>
        )
    }

export default Items

import React from 'react'

const Filters = (props) => {

    const arr = Object.values(props.categories)

    const filters = arr.map((item, index) => {
        return(
            <button className='category btn' key={index} id={index} onClick={ props.onFilterClick }>{item.name}</button>
        )
    })

        return(
            <div className='store-filters'>
                <div className='filter-category'>
                    <div className='categories'>
                    <button className='category-all btn' id="all" onClick={ props.onFilterClick }>all</button>
                        { filters }
                    </div>
                    <select className="filter">
                        <option className='filter-variable'>Price: high to low</option>
                        <option className='filter-variable'>Price: low to high</option>
                    </select>
                </div>
            </div>
        )
    }

export default Filters

[Undefined User]

Undefined User, о, дидапдейт лишний. так бы и не заметил)

[Undefined User]

о, и еще лишнее нашел. лол, почему только сейчас я это нахожу)