Question

我有一个Image类，该类允许我从containiner Component更改图像并更新图像样式。

我的课：

import React from "react";
import Radium from 'radium';

class StateImage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            images: this.props.images.map(image => ({
                ...image,
                loaded: false,
                activeStyle: {visibility: 'hidden'}
            })),
            activeMode: props.activeMode
        };

        this.state.images.forEach((image, index) => {

            const src = image.image;

            const primaryImage = new Image();
            primaryImage.onload = () => {

                const images = [...this.state.images];
                images[index].loaded = true;

                if (images[index].name === this.state.activeMode) {
                    images[index].activeStyle = images[index].style;

                    // is this image the default activated one? if so, activate it now that it's loaded.
                    images[index].onActivate();
                } else
                    images[index].activeStyle = {visibility: 'hidden'};

                this.setState( {
                    ...this.state,
                    images
                });
            };
            primaryImage.src = src;

        });
    }



    updateImageStyle = (name, style) => {

        let images = [...this.state.images].map( (image) => {
            if (image.name === name) {
                return {
                    ...image,
                    style: style,
                    activeStyle: style
                }
            }  else return image;
        });

        this.setState({
            ...this.state,
            images: images
        }, () => {
            console.log("updated state");
            console.log(this.state);

        });


    };

    onClick = () => {
         this.state.images.map( (image) => {
             if (image.clickable && image.name === this.state.activeMode)
                this.props.eventHandler(this.state.activeMode);
         });

    };

    render () {
        console.log("render");
        console.log(this.state.images);

        let images = this.state.images.map((image, index) => {
             return <img
                 key={ index }
                 onClick={ this.onClick }
                 style={ image.activeStyle }
                 src={ image.image }
                 alt={ image.alt}/>
         });

        return (
            <div>
                {images}
            </div>
        );
    }
}

export default Radium(StateImage);

我的问题与updateImageStyle有关。调用此函数时，我需要更改活动图像的style元素并重新渲染，以便用户看到更改。

updateImageStyle已到达，我更新了images的{{1}}部分。 state完成后，我console.log进行了更改，我可以验证更改是否正确！

但是，我也从setState进行console.log，令我惊讶的是，从render输出的this.state.images很旧，无法反映我的更改。

怎么可能？ render证明状态为console.log的陈旧状态称为render，直到我确认更改已完成。

我的控制台日志：

Answer 1

您很可能会看到您的状态被另一个setState调用覆盖，也许是primaryImage.onload中的那个。由于React批次setState一起调用，因此render()在更新中仅被调用一次。

React在渲染中显示陈旧状态

1 个答案: