Как мне сопоставить объект json с определенной структурой json

Question

Я использую antd cascader для заполнения опций в хорошем выпадающем списке

https://ant.design/components/cascader/

Моя цель: 1. Загрузить набор опций из удаленного тестового API (1-й уровенькаскад) 2. Когда пользователь нажимает на любую опцию, затем загружает второй уровень (комментарии)

Я использую этот API остальных как пример:

https://jsonplaceholder.typicode.com/

В примере нужны такие данные:

const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  }];

Так вот мой код:

import React, { Component } from 'react';
import { Row, Col, Tabs, Menu, Dropdown, Button, Icon, message } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { Cascader } from 'antd';

const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  }, {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  }];

export default class extends Component {

    constructor(props) {
        super(props);
        this.state = {options};
        this.loadData = this.loadData.bind(this)
    }

    onChange(value, selectedOptions) {
        console.log(value, selectedOptions);
    }

    loadData(selectedOptions){
            fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(json => console.log(json));

      }


    render(){
        const { rowStyle, colStyle, gutter } = basicStyle;
        const TabPane = Tabs.TabPane;

        return (
        <div>
            <LayoutWrapper>
            <PageHeader>{<IntlMessages id="pageTitles.PageAdministration" />}</PageHeader>
            <Row style={rowStyle} gutter={gutter} justify="start">
            <Col md={12} sm={12} xs={24} style={colStyle}>
                <Box
                title={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
                subtitle={<IntlMessages id="pageTitles.siteCollectionsTitle" />}
                >
                <ContentHolder>
                    <Cascader
                                options={this.state.options}
                                loadData={this.loadData}
                                onChange={this.onChange}
                                changeOnSelect
                    />
                </ContentHolder>
                </Box>
            </Col>
            </Row>
        </LayoutWrapper>
        </div>
        );
  }
}

У меня есть 2 основных вопроса

1. Как мнепреобразовать JSON из первого ответа и связать его с элементом управления
2. Как только пользователь выбирает опцию, как мне загрузить 2-й уровень опций?(например, комментарии к сообщению сверху остальные API)

Answer 1

1. Вы можете сохранить ответ API в ваше местное состояние с помощью setState.
2. Воспользуйтесь loadData опорами компонента Cascader

Я не подписалсяВаш код точно, но я надеюсь, что это поможет вам понять:

const { Cascader } = antd;


class LazyOptions extends React.Component {
  state = {
    options: [],
  };

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => {
        console.log(json);
        const firstLevelOptions = json.map(post => ({
          value: post.id,
          label: post.title,
          isLeaf: false    
        }));
        this.setState({
          options: firstLevelOptions
        })
      }
    );
  }

  onChange = (value, selectedOptions) => {
    console.log("value:", value, "selectedOptions", selectedOptions);
  }

  loadData = (selectedOptions) => {
    console.log("loaddata", selectedOptions);

    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;

    // load options lazily
    fetch(`https://jsonplaceholder.typicode.com/posts/${targetOption.value}/comments`)
      .then(response => response.json())
      .then(json => {
        targetOption.loading = false;
        console.log(json);
        const secondLevelOptions = json.map(comment => ({
          value: comment.id,
          label: comment.body,
          isLeaf: true    
        }));
        targetOption.children = secondLevelOptions;
        this.setState({
          options: [...this.state.options],
        });
      }
    );
  }

  render() {
    return (
      <Cascader
        options={this.state.options}
        loadData={this.loadData}
        onChange={this.onChange}
        changeOnSelect
      />
    );
  }
}

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

Пример кодового ключа