单击按钮后未重新呈现页面

Question

我有一个react类组件，它使用react-masonry生成一个产品展示。我现在想添加过滤功能，过滤器选项显示为按钮，在每次单击时，页面元素都应该被过滤，砖石显示应该重新渲染。过滤器功能运行良好，但我无法让砖石重新渲染。

import React from 'react'
import PropTypes from 'prop-types'
import Masonry from 'react-masonry-component'
import Product from 'components/Product'


const masonryOptions = {
    transitionDuration: 0
};

class Gallery extends React.Component {
    constructor (props){
        super(props);
        this.state ={
            filter:props.filter,
            elements:props.elements,
            type:props.type,
        }
         this.handleFilterClick=this.handleFilterClick.bind(this)
    }


    handleFilterClick(filter){
        console.log(filter)

        this.setState({filter:filter})
        console.log(this.state.filter)
    }

    filterProducts (elements,filter){
        const filteredArray=elements.filter(function(el){
            for (let i in el.tags) { 
                if (el.tags[i].slug===filter){

                    return true;

                }

            } 
            return false
        })
        return filteredArray;
    }

    renderGallery(){
        const type=this.state.type
        const elements=this.state.elements
        var filter=this.state.filter
        const filteredElements = elements
        if (filter !=="*"){
            const filteredElements = this.filterProducts(elements,filter)
        }

        const childElements = filteredElements.map(function(element,key){

           if (element.mainPhoto!=null && element.isDogFood==type){
           return (

               <Product key={key} element={element}/>

            );} else{
                return null;
            }
        });
         return (



                <Masonry
                    className={'my-gallery-class'} // default ''
                    options={masonryOptions} // default {}
                    disableImagesLoaded={false} // default false
                    updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false

                >
                 <div className="col-md-12">

                    <ul className="filter text-center text-inline">
                      <li>
                        <button data-filter="*" className="selected">Tüm Ürünler</button>
                      </li>
                      <li>
                        <button filter="nograin">Tahılsız</button>
                      </li>
                      <li>
                        <button filter="seafood">Deniz Mahsülleri</button>
                      </li>
                      <li>
                        <button filter="poultry">Beyaz Et</button>
                      </li>
                      <li>
                        <button filter="redmeat">Kırmızı Et</button>
                      </li>
                      <li>
                        <button filter="pate" onClick={() =>{this.handleFilterClick("pate")}}>Püre</button>
                      </li>
                    </ul>
                  </div>
                    {childElements}
                </Masonry>


        );

    }

    render() {
       return (
       this.renderGallery()
       )
    }

}

Gallery.propTypes={

    type: PropTypes.bool
}
export default Gallery

Answer 1

在constructor中使用getDerivedStateFromProps而不是使用道具

import React from 'react'
import PropTypes from 'prop-types'
import Masonry from 'react-masonry-component'
import Product from 'components/Product'


const masonryOptions = {
    transitionDuration: 0
};

class Gallery extends React.Component {
  constructor (props){
    super(props);
    this.state = {
      // Don't assign direct value in constructor as constructor function 
      // calls only at initialization
      filter:props.filter,
      elements:props.elements,
      type:props.type,
    }
    this.handleFilterClick=this.handleFilterClick.bind(this)
  }

  getDerivedStateFromProps (props, prevState) {
    if(//Put a valid condition) {
      return {
        filter: props.filter,
        elements: props.elements,
        type: props.type
      }
    }
    return {}
  }

  handleFilterClick(filter){
    console.log(filter)
    this.setState({filter:filter})
    console.log(this.state.filter)
  }

  filterProducts (elements,filter){
    const filteredArray=elements.filter(function(el){
      for (let i in el.tags) { 
          if (el.tags[i].slug===filter){
            return true;
          }
      } 
      return false
    })
    return filteredArray;
  }

  renderGallery(){
    const type=this.state.type
    const elements=this.state.elements
    var filter=this.state.filter
    const filteredElements = elements
    if (filter !=="*"){
        const filteredElements = this.filterProducts(elements,filter)
    }

    const childElements = filteredElements.map(function(element,key){

     if (element.mainPhoto!=null && element.isDogFood==type){
     return (
         <Product key={key} element={element}/>
      );} else {
        return null;
      }
    });
    return (
      <Masonry
        className={'my-gallery-class'} // default ''
        options={masonryOptions} // default {}
        disableImagesLoaded={false} // default false
        updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
      >
        <div className="col-md-12">
          <ul className="filter text-center text-inline">
            <li>
              <button data-filter="*" className="selected">Tüm Ürünler</button>
            </li>
            <li>
              <button filter="nograin">Tahılsız</button>
            </li>
            <li>
              <button filter="seafood">Deniz Mahsülleri</button>
            </li>
            <li>
              <button filter="poultry">Beyaz Et</button>
            </li>
            <li>
              <button filter="redmeat">Kırmızı Et</button>
            </li>
            <li>
              <button filter="pate" onClick={() =>{this.handleFilterClick("pate")}}>Püre</button>
            </li>
          </ul>
        </div>
        {childElements}
      </Masonry>
    );
  }

  render() {
   return (
     this.renderGallery()
   )
  }
}

Gallery.propTypes = {
  type: PropTypes.bool
}

export default Gallery