Javascript React js-setState和对象数组

我是新来的反应者，所以我正在努力解决这个问题：

为什么将状态设置为单个对象数组有效，但从状态获取数组、推送到状态并再次设置为状态无效？

这是工作代码。我将此图像数组设置为状态，未初始化：

class PersonalBananas extends React.Component {

    constructor(){
        super();
        this.state = {
            username: 0,
            images: 0,
            pred: 0,
            IMAGES: 0
        }
        this.imgList = this.imgList.bind(this)
    }

在componentDidMount中，我将imgList（）称为：

在imgList（）中，我调用getImgPred：

imgList = () => {
        var $this = this;
        const IMAGES = [];
        const imgpaths = this.state.images;
        console.log("images from imgLis():"+imgpaths);

        for (let i = 0; i < imgpaths.length; i++) {
            var path = imgpaths[i]
            this.getImgPred(path);
            console.log("pred:"+$this.state.pred);
        }
        console.log("IMAGES from imgLis():"+IMAGES);
    };

问题是：当我初始化const IMAGES=[]时，按下它，然后设置状态-它工作正常。我想做的是：const Images=this.state.Images。我做不到

    IMAGESpush = (path) => {
        var $this = this;
        const IMAGES = [];
        IMAGES.push({
            src: process.env.PUBLIC_URL +`/${path}`,
            thumbnail: process.env.PUBLIC_URL +`/${path}`,
            thumbnailWidth: 320,
            thumbnailHeight: 320,
            caption: $this.state.pred
        })
        this.setState({
            IMAGES: IMAGES
        })
    }



    render() {

        return (
            <div>
                <Gallery images={this.state.IMAGES}/>
            </div>
        )
    }
}

export default PersonalBananas;

IMAGESpush=（路径）=>{
var$this=这个；
常量图像=[]；
图像推送({
src:process.env.PUBLIC_URL+`/${path}`，
缩略图：process.env.PUBLIC_URL+`/${path}`，
指钉宽度：320，
拇指指甲高度：320，
描述：$this.state.pred
})
这是我的国家({
图像：图像
})
}
render（）{
返回(
)
}
}
出口香蕉；

推送到一个数组并不会改变它的引用，它本质上是React的协调算法的同一个对象（它不会深入比较其状态中的对象）

您真正应该做的是创建一个新数组，将旧数组扩展到其中，并在其上添加一个新元素。像这样：

this.setState({
图像：[…this.state.IMAGES，{/*此处为新对象*/}]
});

您还可以使用

concat

函数合并数组，因为它不会更改任何数组，而是返回一个新数组

this.setState({
IMAGES:this.state.IMAGES.concat（[{/*newobjecthere*/}]）
});

推送到一个数组并不会改变它的引用，它本质上是React的协调算法的同一个对象（它不会深入比较其状态中的对象）

您真正应该做的是创建一个新数组，将旧数组扩展到其中，并在其上添加一个新元素。像这样：

this.setState({
图像：[…this.state.IMAGES，{/*此处为新对象*/}]
});

您还可以使用

concat

函数合并数组，因为它不会更改任何数组，而是返回一个新数组

this.setState({
IMAGES:this.state.IMAGES.concat（[{/*newobjecthere*/}]）
});

非常感谢！（不知怎的，我总是在我的stackoverflow问题的第一个答案出现的同一时刻找到答案…）非常感谢！（不知何故，我总是在我的stackoverflow问题的第一个答案出现的同一时刻找到答案……）

    getImgPred = (path) => {
        var username = this.state.username;
        var $this = this;

        let regex = new RegExp(username+'\/(.*?)$');
        let imgRegex= /{username}\/(.*?)$/;

        let filename = regex.exec(path);
        console.log("filename at front:"+filename[1]);
        console.log("regex1:"+imgRegex+", regex2:"+regex);

        axios.post('http://localhost:8081/auth/imgpred',
            "filename=" + filename[1]
        ).then(function (response) {
            console.log("response at front (get img prediction):"+response.data);
            if (response.status === 200) {
                $this.setState({
                    pred: response.data
                }, function() { $this.IMAGESpush(path) } );
            }
        });
    }

    IMAGESpush = (path) => {
        var $this = this;
        const IMAGES = [];
        IMAGES.push({
            src: process.env.PUBLIC_URL +`/${path}`,
            thumbnail: process.env.PUBLIC_URL +`/${path}`,
            thumbnailWidth: 320,
            thumbnailHeight: 320,
            caption: $this.state.pred
        })
        this.setState({
            IMAGES: IMAGES
        })
    }



    render() {

        return (
            <div>
                <Gallery images={this.state.IMAGES}/>
            </div>
        )
    }
}

export default PersonalBananas;