在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ React map 無法渲染問題

React map 無法渲染問題

在handleNewsPuls onClick 后 確認(rèn)reply 已經(jīng)添加了data的數(shù)組中,可是為什么render 并沒有執(zhí)行?

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={"回復(fù)關(guān)鍵詞"} {...FormItemStyle}>
                        <Input type={"text"} placeholder="回復(fù)關(guān)鍵詞" value={this.state.keyword} onChange={this.handleOnChangeKeyWord.bind(this)} />
                    </FormItem>

                    <FormItem label={"回復(fù)類型"} {...FormItemStyle}>
                        <RadioGroup onChange={this.handleOnChange.bind(this)} defaultValue="text">
                            <RadioButton value="text">文本</RadioButton>
                            <RadioButton value="url">外聯(lián)地址</RadioButton>
                            <RadioButton value="b">圖片</RadioButton>
                            <RadioButton value="c">語(yǔ)音</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={"回復(fù)文字內(nèi)容"} />
                                            </FormItem>
                                        );
                                        break;
                                    case "url":
                                        return (
                                            <FormItem>
                                                <Input type={"text"} placeholder={"外聯(lián)地址"} 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={"標(biāo)題"} 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);

圖片描述

回答
編輯回答
孤慣
PureComponent
react 的PureComponent僅僅進(jìn)行了淺比較,reply指向的始終是同一個(gè)對(duì)象,所以不會(huì)重新update
        this.setState({
            reply: Object.assign(reply, { data: data }),
        }, () => {
            this.render();
        })
        // 改為
        this.setState({
            reply: Object.assign({}, reply, { data: data }),
        })
2017年8月21日 08:04