antd单选框Radio问题

Question

用到了antd的Radio单选框出了点问题，页面初始化表格数据第一条是默认不选上，第二条第三条分别默认选上第二个跟第一个，当我点击页面上 “请求新数据” 按钮时，页面重新setState了一次，表格第一条第三个默认正常选上，第二条不选上，但给我选上了，这个问题就来了，打断点发现checked这个值是false的，不知道为什么还选上

下面接口格式是根据后台请求回来的格式模拟的，代码不多，用到了antd的Table

import React, {Component, PropTypes} from 'react';
import { Tabs, DatePicker, Radio, Table, Select } from 'antd';
const RadioGroup = Radio.Group;
const getUserName = "张三";

class Radios extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentWillMount() {
    this.initRequest();
  }
  initRequest = ()=> {
    let data = [{
        key: 1,
        RQ: '20180805',
        CODE: '55199106.RQ',
        STATE: '{"a":[],"b":[],"c":[]}',
      },{
        key: 2,
        RQ: '20180505',
        CODE: '55199106.RQ',
        STATE: '{"a":[],"b":["张三"],"c":[]}',
      },{
        key: 3,
        RQ: '20180115',
        CODE: '55199106.RQ',
        STATE: '{"a":["张三"],"b":[],"c":[]}',
      }];
      this.setState({ initData: data });
  }
  requestData =() => {
    let data = [{
      key: 1,
      RQ: '20180805',
      CODE: '55199106.RQ',
      STATE: '{"a":[""],"b":[],"c":["张三"]}',
    },{
      key: 2,
      RQ: '20180505',
      CODE: '55199106.RQ',
      STATE: '{"b":[],"a":[],"c":[]}',
    },{
      key: 3,
      RQ: '20180805',
      CODE: '55199106.RQ',
      STATE: '{"a":[""],"b":[""],"c":["张三"]}',
    }];
    this.setState({ initData: data });
  }
  render() {
    const data = this.state.initData;
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '日期',
        dataIndex: 'RQ',
        key: 'RQ',
        width: 120,
        filteredValue: filteredInfo.RQ || null,
        onFilter: (value, record) => record.RQ.includes(value),
        sorter: (a, b) => a.RQ.length - b.RQ.length,
        sortOrder: sortedInfo.columnKey === 'RQ' && sortedInfo.order,
      }, {
        title: '代码',
        dataIndex: 'CODE',
        key: 'CODE',
        width: 168,
        sorter: (a, b) => a.CODE - b.CODE,
        sortOrder: sortedInfo.columnKey === 'CODE' && sortedInfo.order,
      }, {
        title: '投票',
        width: 1165,
        render: (text, data, index) => {
          let userName = text.STATE ? JSON.parse(text.STATE) : '',userNames = '';
          if (userName) {
            if (userName.a) {
              for (let i = 0; i < userName.a.length; i++) {
                if (userName.a[i] === getUserName) {
                  userNames = '100%造假';
                }
              }
            }
            if (userName.b) {
              for (let j = 0; j < userName.b.length; j++) {
                if (userName.b[j] === getUserName) {
                  userNames = '大概率';
                }
              }
            }
            if (userName.c) {
              for (let k = 0; k < userName.c.length; k++) {
                if (userName.c[k] === getUserName) {
                  userNames = '小概率';
                }
              }
            }
          }
          return (
            <div>
              <RadioGroup onChange={this.RadioGroup}>
                <Radio checked={ userNames == "100%造假" ? true : false } value="0">100%造假</Radio>
                <Radio checked={ userNames == "大概率" ? true : false } value="1">大概率</Radio>
                <Radio checked={ userNames == "小概率" ? true : false } value="2">小概率</Radio>
              </RadioGroup>
            </div>
          );
        },
      }];
    return (
      <div>
        <button onClick={this.requestData}>请求新数据</button>
        <Table scroll={{ x: true, y: 500 }} pagination={{ showQuickJumper: true, pageSize: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
      </div>
    );
  }

  RadioGroup =(e) => {
    console.log(e.target.value);
  }
}
export default Radios;

Answer 1

你这文档都没看完，就写代码了，差评。

<RadioGroup onChange={this.onChange} value={this.state.value}>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </RadioGroup>

这个才是RadioGroup的用法,丛植RadioGroup的value值就可以了。

然后不得不说，代码写的比较丑，但是给的例子可以直接跑起来，这点不错。
丑指的这里

if (userName) {
                        if (userName.a) {
                            for (let i = 0; i < userName.a.length; i++) {
                                if (userName.a[i] === getUserName) {
                                    userNames = '100%造假';
                                }
                            }
                        }
                        if (userName.b) {
                            for (let j = 0; j < userName.b.length; j++) {
                                if (userName.b[j] === getUserName) {
                                    userNames = '大概率';
                                }
                            }
                        }
                        if (userName.c) {
                            for (let k = 0; k < userName.c.length; k++) {
                                if (userName.c[k] === getUserName) {
                                    userNames = '小概率';
                                }
                            }
                        }
                    }

稍微修改了一下

import React, { Component, PropTypes } from 'react';
import { Tabs, DatePicker, Radio, Table, Select } from 'antd';
const RadioGroup = Radio.Group;
const getUserName = "张三";
const map = {
    a: 0,
    b: 1,
    c: 2,
    default: 9999
}
class Radios extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentWillMount() {
        this.initRequest();
    }
    initRequest = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":[],"c":[]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":["张三"],"c":[]}',
        }, {
            key: 3,
            RQ: '20180115',
            CODE: '55199106.RQ',
            STATE: '{"a":["张三"],"b":[],"c":[]}',
        }];
        this.setState({ initData: data });
    }
    requestData = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[],"c":["张三"]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"b":[],"a":[],"c":[]}',
        }, {
            key: 3,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[""],"c":["张三"]}',
        }];
        this.setState({ initData: data });
    }
    render() {
        const data = this.state.initData;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
            {
                title: '日期',
                dataIndex: 'RQ',
                key: 'RQ',
                width: 120,
                filteredValue: filteredInfo.RQ || null,
                onFilter: (value, record) => record.RQ.includes(value),
                sorter: (a, b) => a.RQ.length - b.RQ.length,
                sortOrder: sortedInfo.columnKey === 'RQ' && sortedInfo.order,
            }, {
                title: '代码',
                dataIndex: 'CODE',
                key: 'CODE',
                width: 168,
                sorter: (a, b) => a.CODE - b.CODE,
                sortOrder: sortedInfo.columnKey === 'CODE' && sortedInfo.order,
            }, {
                title: '投票',
                width: 1165,
                render: (text, data, index) => {
                    
                    // 解析数据
                    let userName = text.STATE ? JSON.parse(text.STATE) : '', userNames = '';

                    // 设置默认显示值
                    let value = map.default;
                    // 获取选中value，可以提成方法
                    for (let variable in userName) {
                        if (userName[variable].some((item) => item === getUserName )) {
                            value = map[variable];
                            break;
                        }
                    }

                    return (
                        <div>
                            <RadioGroup value={value} onChange={this.RadioGroup}>
                                <Radio  value={map.a}>100%造假</Radio>
                                <Radio  value={map.b}>大概率</Radio>
                                <Radio  value={map.c}>小概率</Radio>
                            </RadioGroup>
                        </div>
                    );
                },
            }];
        return (
            <div>
                <button onClick={this.requestData}>请求新数据</button>
                <Table scroll={{ x: true, y: 500 }} pagination={{ showQuickJumper: true, pageSize: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
            </div>
        );
    }

    RadioGroup = (e) => {
        console.log(e.target.value);
    }
}
export default Radios;

===补充内容==
那个本来应该你自己来实现的，只是指出问题。

import React, { Component, PropTypes } from 'react';
import { Tabs, DatePicker, Radio, Table, Select } from 'antd';
const RadioGroup = Radio.Group;
const getUserName = "张三";
const map = {
    a: 'a',
    b: 'b',
    c: 'c',
}
class Radios extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentWillMount() {
        this.initRequest();
    }

    getStateFromoData (data) {
        const { STATE } = data;
        return data.map((item) => {
            const parseState = JSON.parse(item.STATE) || {};

            item.STATE = "";

            for(let key in parseState) {
                if(parseState[key].some((item) => {return item === getUserName})) {
                    item.STATE = key;
                }
            }

            return item;
        })
    }
    initRequest = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":[],"c":[]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":["张三"],"c":[]}',
        }, {
            key: 3,
            RQ: '20180115',
            CODE: '55199106.RQ',
            STATE: '{"a":["张三"],"b":[],"c":[]}',
        }];
        this.setState({ initData: this.getStateFromoData(data) });
    }

    requestData = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[],"c":["张三"]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"b":[],"a":[],"c":[]}',
        }, {
            key: 3,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[""],"c":["张三"]}',
        }];
        this.setState({ initData: this.getStateFromoData(data) });
    }
    render() {
        const data = this.state.initData;
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
            {
                title: '日期',
                dataIndex: 'RQ',
                key: 'RQ',
                width: 120,
                filteredValue: filteredInfo.RQ || null,
                onFilter: (value, record) => record.RQ.includes(value),
                sorter: (a, b) => a.RQ.length - b.RQ.length,
                sortOrder: sortedInfo.columnKey === 'RQ' && sortedInfo.order,
            }, {
                title: '代码',
                dataIndex: 'CODE',
                key: 'CODE',
                width: 168,
                sorter: (a, b) => a.CODE - b.CODE,
                sortOrder: sortedInfo.columnKey === 'CODE' && sortedInfo.order,
            }, {
                title: '投票',
                width: 1165,
                key: 'VOTE',
                render: (text, data, index) => {

                    return (
                        <div>
                            <RadioGroup value={text.STATE} onChange={this.RadioGroup(index)}>
                                <Radio  value={map.a}>100%造假</Radio>
                                <Radio  value={map.b}>大概率</Radio>
                                <Radio  value={map.c}>小概率</Radio>
                            </RadioGroup>
                        </div>
                    );
                },
            }];
        return (
            <div>
                <button onClick={this.requestData}>请求新数据</button>
                <Table scroll={{ x: true, y: 500 }} pagination={{ showQuickJumper: true, pageSize: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
            </div>
        );
    }

    RadioGroup = (index) => {
        return (e) => {
            // 拷贝数据
            const copyData = this.state.initData.slice(0)
            // 修改数据
            copyData[index].STATE = e.target.value;
            // 更新状态
            this.setState({
                initData: copyData
            })
        }
    }
}
export default Radios;

看完好好思考下你之前的代码结构，其实很有问题

Answer 2

目测好像是key的问题。

Answer 3

你的table没设置rowKey