javascript - How to render default value in ant design checkbox using boolean? - Stack Overflow

admin 管理员组

文章数量: 1086019

I am trying to render a checkbox default value using ant-design.

Here is the data I want to render

plainOptions: [
    {
        name: "apple",
        is_enabled: "true",
    },
    {
        name: "orange",
        is_enabled: "true"
    },
    {
        name: "banana",
        is_enabled: "true"      
    },
    {
        name: "grape",
        is_enabled: "false",
    },
]

And here is the ponent :

                    <FormItemRow>
                        <Col span={24} style={colStyle}>
                            <FormItem label={'fruits'} colon={ false } style={{ marginBottom: 0 }}> 
                                <CheckboxGroup options={plainOptions} defaultValue={['true']}>
                                    {plainOptions.map(option => {
                                        return (
                                            <Checkbox key={option.label}>{option.label}</Checkbox>
                                        )
                                    })}
                                </CheckboxGroup>
                            </FormItem>
                        </Col>
                        </FormItemRow>

I get the result I want to see but the problem of using defaultValue inside of CheckboxGroup ponent is I get warning saying

Warning: Encountered two children with the same key, `true`. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Seems like defaultValue works as just like key .

I also added checked inside of Check ponent and assigned boolean value but it does not work either.

How can I safely render a default value inside of checkbox without warning sign?

I am trying to render a checkbox default value using ant-design.

Here is the data I want to render

plainOptions: [
    {
        name: "apple",
        is_enabled: "true",
    },
    {
        name: "orange",
        is_enabled: "true"
    },
    {
        name: "banana",
        is_enabled: "true"      
    },
    {
        name: "grape",
        is_enabled: "false",
    },
]

And here is the ponent :

                    <FormItemRow>
                        <Col span={24} style={colStyle}>
                            <FormItem label={'fruits'} colon={ false } style={{ marginBottom: 0 }}> 
                                <CheckboxGroup options={plainOptions} defaultValue={['true']}>
                                    {plainOptions.map(option => {
                                        return (
                                            <Checkbox key={option.label}>{option.label}</Checkbox>
                                        )
                                    })}
                                </CheckboxGroup>
                            </FormItem>
                        </Col>
                        </FormItemRow>

I get the result I want to see but the problem of using defaultValue inside of CheckboxGroup ponent is I get warning saying

Warning: Encountered two children with the same key, `true`. Keys should be unique so that ponents maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Seems like defaultValue works as just like key .

I also added checked inside of Check ponent and assigned boolean value but it does not work either.

How can I safely render a default value inside of checkbox without warning sign?

• javascript
• reactjs
• ant-design-pro

Share Improve this question Follow asked Aug 27, 2019 at 2:46 GoonGamjaGoonGamja 2,28688 gold badges2626 silver badges5353 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

First of all you used option.label instead of option.name, which gives undefined to all the keys, that's why you are getting warning of same keys.

<Checkbox key={option.name}>{option.name}</Checkbox>

If you are using CheckboxGroup, you don't need to use Checkbox. You can use CheckboxGroup like this...

this.state = {
 plainOptions: ["apple", "orange", "banana", "grape"],
 checkedList: ["apple", "banana"] // Default Value
};

you will get array of values as param of the onChange event

onChange = (checkedList) => {
  this.setState({ checkedList });
}

<CheckboxGroup
  options={this.state.plainOptions}
  value={this.state.checkedList}
  onChange={this.onChange}
/>

In above example I used checkedList initial state for default value and assign latest state on onChange event.

I actually think, that the key error es from the fact that you used option.label instead of option.name. (which in this case should be undefined)

You have to differentiate between value and checked. The value is the content, that will be returned if the checkbox is checked.

If you define a value, but the checkbox is not checked, it is not send along anyway.

Maybe turn the checkbox into a controlled input (meaning: you have a onChange event, that triggers a checked state) and pass your is_enabled value in checked prop.

<Checkbox key={option.name} checked={this.state.options[optionKey].is_enabled}>{option.name}</Checkbox>

本文标签： javascriptHow to render default value in ant design checkbox using booleanStack Overflow