在 Reactjs 中状态发生变化时渲染一个新组件而不替换旧组件

我希望在状态变量data中有数据时呈现Box组件.当状态更新时(在后台从服务器获取数据)，我希望使用新数据呈现另一个Box组件，并在每次状态更改时继续添加Box组件.

问题是，每次状态更改时，整个组件都会被新的Box组件替换.

这是我在不重复代码的情况下实际想要做的事情的概述--&gt；只是一个例子.

//box component
function Box(props){
    return(
        <div style={{ "height": props.height, "width": props.width, "backgroundColor": props.color }}></div>
    );
}

function boxMarkup(){

    if(data.length == 0){
        return "";
    }

    if(data.length == 1){
        return(
            <div className="col-1">
                <Box height={data.height + "px"} width={data.width + "px"} color={data.color} />
            </div>
        );
    }

    if(data.length == 2){
        return(
            <div className="col-2">
                {
                    data.map(item => <Box key={item.id} height={item.height + "px"} width={item.width + "px"} color={item.color} />)
                }
            </div>
        );
    }

    if(data.length == 4){
        return(
            <div className="col-4">
                {
                    data.map(item => <Box key={item.id} height={item.height + "px"} width={item.width + "px"} color={item.color} />)
                }
            </div>
        );
    }
}

//return component markup
return(
    <div>
        <EmailSent message={emailSentMessage.message} />
        {boxMarkup()}
    </div>
);

因此，基本上我希望使用新数据呈现一个新的Box组件，同时将旧的Box组件保留在屏幕上.这是我的BoxComponent code美元.