React map 无法渲染问题

Question

在handleNewsPuls onClick 后 确认reply 已经添加了data的数组中，可是为什么render 并没有执行？

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);

Answer 1

PureComponent
react 的PureComponent仅仅进行了浅比较，reply指向的始终是同一个对象，所以不会重新update

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