我可以使用State里面的过滤函数ReactJS

Question

class ConsultantsImage extends Component{

    constructor(props) {
        super(props);
        this.state = {
            firstIndex: 0,
            numConsult:2,
            consultsImages:[],
            filterImages:[]
        }

        this.getConsultantsImages();
        this.showConsultantImages();
        this.previousConsultant = this.previousConsultant.bind(this);
        this.nextConsultant = this.nextConsultant.bind(this);

    }
    getConsultantsImages(){
        let consultsImages = []

        this.props.images.map((consultantImage,index) =>
            consultsImages.push(<ConsultImage key={index} image={consultantImage} />)
        )

        this.state = {consultsImages:consultsImages}
    }
    nextConsultant(){
        if(this.props.images.length > this.state.firstIndex ){
            this.setState({firstIndex:this.state.firstIndex++})
        }



    }
    previousConsultant(){
        if(this.state.firstIndex >0) {
            this.setState({firstIndex: this.state.firstIndex--})
        }
    }
    showConsultantImages(){
      this.state.filterImages=this.state.consultsImages.filter((consultImage,index)=> index<this.state.numConsult)
    }

    render(){


        return(

            <Row>
                <i className="icon-arrow-left icons font-2xl d-block mt-4"></i>
                {this.state.filterImages}
                <i className="icon-arrow-right font-2xl d-block mt-4"></i>
            </Row>
        )
    }
}

export default ConsultantsImage;

  

我想了解如何在过滤功能中使用反应状态。

这是我使用的代码片段

this.state.filterImages=this.state.consultsImages.filter((consultImage,index)=> index< this.state.numConsult)

Answer 1

由于showConsultantImages和getConsultantsImages仅从构造函数中调用并用于设置状态数组，因此您只需从数组返回并直接设置为state。此外，由于您仅基于索引进行过滤，因此您只需使用splice/slice

class ConsultantsImage extends Component{

    constructor(props) {
        super(props);
        this.state = {
            firstIndex: 0,
            numConsult:2,
            consultsImages: this.getConsultantsImages();,
            filterImages:[]
        }

        this.previousConsultant = this.previousConsultant.bind(this);
        this.nextConsultant = this.nextConsultant.bind(this);

    }

    componentDidMount() {
         this.showConsultantImages();
    }
    getConsultantsImages(){
        let consultsImages = []

        this.props.images.map((consultantImage,index) =>
            consultsImages.push(<ConsultImage key={index} image={consultantImage} />)
        )

        return consultsImages
    }
    nextConsultant(){
        if(this.props.images.length > this.state.firstIndex ){
            this.setState({firstIndex:this.state.firstIndex++})
        }



    }
    previousConsultant(){
        if(this.state.firstIndex >0) {
            this.setState({firstIndex: this.state.firstIndex--})
        }
    }
    showConsultantImages(){
        this.setState(prev => (
             {
                 filterImages: prev.consultsImages.slice(0, this.state.numConsult)
              }
        ));
    }

    render(){
        return(

            <Row>
                <i className="icon-arrow-left icons font-2xl d-block mt-4"></i>
                {this.state.filterImages}
                <i className="icon-arrow-right font-2xl d-block mt-4"></i>
            </Row>
        )
    }
}

export default ConsultantsImage;