Как использовать флажок для достижения множественного выбора и одиночного выбора？

Question

Через официальную документацию antd мы можем узнать, как использовать флажок для завершения переключения между множественным выбором и одним выбором.

https://ant.design/components/checkbox/

У меня вопрос: если мои данные флажков поступают из бэкэнд-сервиса, как мне сохранить свои данные? Точно сказать, когда я сохраняю данные в состоянии класса, чтобы изменения в пользовательском интерфейсе могли зависеть от изменений в данных, таких как официальная документация.

Теперь я пытаюсь обойти внутренние данные при рендеринге Dom, следующий пример кода:

import { Checkbox } from 'antd';

const CheckboxGroup = Checkbox.Group;

class App extends React.Component {
  state = {
    indeterminate: true,
    checkAll: false,
  };

  render() {
    return (
      <div>
        <div style={{ borderBottom: '1px solid #E9E9E9' }}>
          <Checkbox
            indeterminate={this.state.indeterminate}
            onChange={this.onCheckAllChange}
            checked={this.state.checkAll}
          >
            Check all
          </Checkbox>
        </div>
        <br />
        {
          this.renderDomFunction(data) 
        }
      </div>
    );
  }
  // data is from back-end server
  renderDomFunction = (data) => {
    let plainOptions = []
    let defaultCheckedList = []
    let dom
    data.map(item => {
      plainOptions.push(
        { 
          label: <div>this is Orange</div>, 
          value: 'Orange', 
          disabled: false 
        },
        { 
          label: <div>this is Apple</div>, 
          value: 'Apple', 
          disabled: false 
        },
      )
      defaultCheckedList.push('Orange','Apple')
    })

    return (
      dom = <li>
        <CheckboxGroup
          options={plainOptions}
          value={defaultCheckedList}
          onChange={this.onChange}
        />
      </li>
    )
  }

  onChange = () => {
    // code...
    // I can't change the state of the checkbox by changing the data now, because isn't maintained in the state of Class.
  }
}

ReactDOM.render(<App />, mountNode);

Я также попытался поместить функцию setstate() в renderDomFunction, но это вызвало бы бесконечный цикл.

Спасибо!