当状态变量data中有数据时，我想渲染Box组件。当状态更新时（在后台从服务器获取数据），我想用新数据渲染另一个Box组件，并在每次状态改变时继续添加Box组件。
问题是每次状态改变时，整个组件都会被新的Box组件替换。
这是一个概述，我实际上想做什么，而不是重复代码-〉只是一个例子。

//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组件。