Antd design Checkbox.Group проблема - PullRequest
Новая
       28

Antd design Checkbox.Group проблема

0 голосов
/ 22 октября 2019

Я пытаюсь реализовать Checkbox, используя antd design . Значения флажков, которые я получаю от бэкэнда, как указано ниже.

Флажки не отображаются при первой загрузке, и они воспроизводятся при каждом нажатии кнопки «Проверить все». Может кто-нибудь подсказать, что я здесь делаю не так? 

subscribe: {
    isLoading: false,
    allSubscribers: [
      {
        subscribe_email: 'test1@test.com'
      },
      {
        subscribe_email: 'test11@test.com'
      }

    ]
  }

что я сделал до сих пор 

import { Checkbox } from 'antd';
const CheckboxGroup = Checkbox.Group;
const plainOptions = [];
const defaultCheckedList = [];

class customeForm extends Component {

    componentDidMount() {

        // this will load data from backend

        this.props.getAllEmailSubscribers();
    }

    state = {
        checkedList: defaultCheckedList,
        indeterminate: true,
        checkAll: false,
    };

    onChange = checkedList => {
        this.setState({
            checkedList,
            indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
            checkAll: checkedList.length === plainOptions.length,
        });
    };

    onCheckAllChange = e => {
        this.setState({
            checkedList: e.target.checked ? plainOptions : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    };

    render() {
        this.props.emailUsers && this.props.emailUsers.allSubscribers && this.props.emailUsers.allSubscribers.map(result =>

            plainOptions.push(result.subscribe_email),
        )

        return (
            <React.Fragment>              
                        <Form onSubmit={this.handleSubmit}>
                                <Checkbox
                                    indeterminate={this.state.indeterminate}
                                    onChange={this.onCheckAllChange}
                                    checked={this.state.checkAll}
                                >
                                    Check all
                                </Checkbox>
                                <CheckboxGroup
                                    options={plainOptions}
                                    value={this.state.checkedList}
                                    onChange={this.onChange}
                                />

                                    <Button type="primary" htmlType="submit">
                                        Send Newsletter
                                    </Button>                                                                
                        </Form>
            </React.Fragment >
        )
    }
}

const WrappedcustomeForm = Form.create()(customeForm);

const mapStateToProps = state => ({
    emailUsers: state.subscribe

});

export default connect(
    mapStateToProps,
    { getAllEmailSubscribers}
)(WrappedcustomeForm );
...