React map cannot render issu

confirm that reply has been added to the array of data after handleNewsPuls onClick, but why didn"t render execute it?

import React, { PureComponent } from "react";
import { withRouter } from "react-router-dom";

import { Form, Input, Radio, Button } from "antd";
import "./style.less";

import WechatService from "services/wechat";

class KeyWordAdd extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            radioValue: "a",
            keyword: "",
            reply: {},
            title: "",
            description: "",
            picurl: "",
            url: ""
        };
    }

    handleOnChangeKeyWord(event) {
        this.setState({
            keyword: event.target.value
        })
    }

    handleOnChange(e) {
        var reply = {};
        if (e.target.value == "news") {
            reply.data = [];
        }

        this.setState({
            reply: reply,
            radioValue: e.target.value
        })
    }

    handleOnChangeReply(key, event) {
        var reply = this.state.reply;

        this.setState({
            [key]: event.target.value,
            reply: Object.assign(reply, { [key]: event.target.value })
        })
    }

    handleNewsPuls(event) {
        event.stopPropagation();
        var reply = this.state.reply;
        var data = reply.data || [];

        data.push({
            title: "",
            description: "",
            picurl: "",
            url: ""
        });

        this.setState({
            reply: Object.assign(reply, { data: data }),
        }, () => {
            this.render();
        })
    }

    handleSubmit() {
        console.log(this.state.keyword);
        WechatService.keywordCreate({
            keyword: this.state.keyword,
            keywordType: this.state.radioValue,
            reply: this.state.reply
        })
    }


    render() {
        const FormItem = Form.Item;
        const RadioGroup = Radio.Group;
        const RadioButton = Radio.Button;

        const FormItemStyle = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        return (
            <div style={{ width: 700 }}>

                <Form>
                    <FormItem label={""} {...FormItemStyle}>
                        <Input type={"text"} placeholder="" value={this.state.keyword} onChange={this.handleOnChangeKeyWord.bind(this)} />
                    </FormItem>

                    <FormItem label={""} {...FormItemStyle}>
                        <RadioGroup onChange={this.handleOnChange.bind(this)} defaultValue="text">
                            <RadioButton value="text"></RadioButton>
                            <RadioButton value="url"></RadioButton>
                            <RadioButton value="b"></RadioButton>
                            <RadioButton value="c"></RadioButton>
                            <RadioButton value="d"></RadioButton>
                            <RadioButton value="e"></RadioButton>
                            <RadioButton value="news"></RadioButton>
                        </RadioGroup>
                    </FormItem>


                    <div className="keyword-edtior__content">
                        {
                            (() => {
                                switch (this.state.radioValue) {
                                    case "text":
                                        return (
                                            <FormItem>
                                                <Input type={"text"} placeholder={""} />
                                            </FormItem>
                                        );
                                        break;
                                    case "url":
                                        return (
                                            <FormItem>
                                                <Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "url")} />
                                            </FormItem>
                                        )
                                        break;
                                    case "news":
                                        return (
                                            <div>
                                                <Button onClick={this.handleNewsPuls.bind(this)}></Button>
                                                
                                                {this.state.reply.data.map((e, i) => {
                                                    console.log(e);
                                                    return (
                                                        <div key={i}>
                                                            google
                                                        </div>
                                                    );
                                                })}


                                                {/* <FormItem>
                                                    <Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "title")} value={this.state.title} />
                                                </FormItem>
                                                <FormItem>
                                                    <Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "description")} value={this.state.description} />
                                                </FormItem>
                                                <FormItem>
                                                    <Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "picurl")} value={this.state.picurl} />
                                                </FormItem>
                                                <FormItem>
                                                    <Input type={"text"} placeholder={""} onChange={this.handleOnChangeReply.bind(this, "url")} value={this.state.url} />
                                                </FormItem> */}
                                            </div>
                                        );
                                        break;
                                }
                            })()
                        }
                    </div>

                    <div className="keyword-edtior__content">
                        <Button onClick={this.handleSubmit.bind(this)}></Button>
                    </div>

                </Form>

            </div>
        )
    }
}

export default withRouter(KeyWordAdd);

Mar.20,2021

The PureComponent of
PureComponent
react only makes a shallow comparison. Reply always points to the same object, so it will not update again
.
        this.setState({
            reply: Object.assign(reply, { data: data }),
        }, () => {
            this.render();
        })
        // 
        this.setState({
            reply: Object.assign({}, reply, { data: data }),
        })
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b35282-2bf69.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b35282-2bf69.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?