Reactjs 我可以在过滤器函数中使用状态吗 class ConsultantsImage扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 第一索引：0， 结果：2， 参考图片：[]， 过滤器图像：[] } 这是.getConsultantsImages（）； 这是showConsultantImages（）； this.previousConsultant=this.previousConsultant.bind（this）； this.nextConsultant=this.nextConsultant.bind（this）； } getConsultantsImages（）{ 让consultsImages=[] this.props.images.map（（consultantImage，index）=> consultsImages.push（） ) this.state={consultsImages:consultsImages} } nextConsultant（）{ if（this.props.images.length>this.state.firstIndex）{ this.setState（{firstIndex:this.state.firstIndex++}） } } 以前的顾问（）{ 如果（this.state.firstIndex>0）{ this.setState（{firstIndex:this.state.firstIndex--}） } } showConsultantImages（）{ this.state.filterImages=this.state.consultsImages.filter（（consultImage，index）=>index index consultsImages.push（） ) 返回参考图片 } nextConsultant（）{ if（this.props.images.length>this.state.firstIndex）{ this.setState（{firstIndex:this.state.firstIndex++}） } } 以前的顾问（）{ 如果（this.state.firstIndex>0）{ this.setState（{firstIndex:this.state.firstIndex--}） } } showConsultantImages（）{ this.setState（prev=>( { FilterImage:prev.consultsImages.slice（0，this.state.numConsult） } )); } render（）{ 返回( {this.state.filterImages} ) } } 导出默认ConsultantsImage； this.state允许您访问state。您的getConsultantsImages（）和showConsultantImages（）方法不应直接更新状态。根据需要，您可以在不赋值的情况下返回筛选数组，也可以使用setState（）更新状态的方法。它们表明您在筛选器中访问状态的方式是正确的，但您直接在不应该执行的位置更改状态。此外，根本不需要进行筛选，因为您仅基于indexshowConsultantImages（）进行筛选调用构造函数设置状态方法显示错误我再次解释我的问题，你能帮我说我有10个数组图像它作为道具传递给这个组件吗。当组件加载时应该显示前4个图像。然后我有一个下一个和上一个按钮当我单击privios按钮时我想再次显示1,2,3,4个图像我想按next按钮显示2,3，4,5图像在何处出现错误。在“下一步”和“上一步”按钮上调用了哪些函数这是一个错误，只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是一个不可操作的错误。 this.state.filterImages=this.state.consultsImages.filter((consultImage,index)=> index< this.state.numConsult) 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;

由于

showConsultantImages

和

getConsultantsImages

仅从构造函数中调用并用于设置状态数组，因此您可以简单地从数组返回并直接设置为状态。此外，由于您仅基于索引进行筛选，因此只需使用

splice/slice

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

class ConsultantsImage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
第一索引：0，
结果：2，
consultsImages:this.getConsultantsImages（）；，
过滤器图像：[]
}
this.previousConsultant=this.previousConsultant.bind（this）；
this.nextConsultant=this.nextConsultant.bind（this）；
}
componentDidMount（）{
这是showConsultantImages（）；
}
getConsultantsImages（）{
让consultsImages=[]
this.props.images.map（（consultantImage，index）=>
consultsImages.push（）
)
返回参考图片
}
nextConsultant（）{
if（this.props.images.length>this.state.firstIndex）{
this.setState（{firstIndex:this.state.firstIndex++}）
}
}
以前的顾问（）{
如果（this.state.firstIndex>0）{
this.setState（{firstIndex:this.state.firstIndex--}）
}
}
showConsultantImages（）{
this.setState（prev=>(
{
FilterImage:prev.consultsImages.slice（0，this.state.numConsult）
}
));
}
render（）{
返回(
{this.state.filterImages}
)
}
}
导出默认ConsultantsImage；

this.state

允许您访问state。您的

getConsultantsImages（）

和

showConsultantImages（）

方法不应直接更新状态。根据需要，您可以在不赋值的情况下返回筛选数组，也可以使用

setState（）

更新状态的方法。它们表明您在筛选器中访问状态的方式是正确的，但您直接在不应该执行的位置更改状态。此外，根本不需要进行筛选，因为您仅基于indexshowConsultantImages（）进行筛选调用构造函数设置状态方法显示错误我再次解释我的问题，你能帮我说我有10个数组图像它作为道具传递给这个组件吗。当组件加载时应该显示前4个图像。然后我有一个下一个和上一个按钮当我单击privios按钮时我想再次显示1,2,3,4个图像我想按next按钮显示2,3，4,5图像在何处出现错误。在“下一步”和“上一步”按钮上调用了哪些函数这是一个错误，只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是一个不可操作的错误。

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

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;