Реакция извлечения данных из настольной системы в мультиселект - PullRequest
Новая
       22

Реакция извлечения данных из настольной системы в мультиселект

0 голосов
/ 19 мая 2019

Попытка заполнить Multiselect list с помощью Tabletop для электронной таблицы Google.

Нет проблем с получением данных из таблицы, но при попытке отправить их на Multiselect e создает пустой массив и тормозит функцию handleChange.

Мой код 

import React, { Component } from "react";
import MultiSelect from "@kenshooui/react-multi-select";
import "@kenshooui/react-multi-select/dist/style.css";
import Tabletop from "tabletop";

class Multilist extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      selectedItems: []
    };
  }

  componentDidMount() {
    //Getting Data Using Tabletop
    Tabletop.init({
      key: "1FfaIvaqL_819zzOz3--ghyrdwqMSLiEsS0tR6NVyqcM",
      callback: googleData => {
        this.setState({
          data: googleData
        });
        console.log("google sheet data --->", googleData);
      },
      simpleSheet: true
    });
  }

  handleChange(selectedItems) {
    this.setState({ selectedItems });
  }

  render() {
    console.log("my data is nome ", this.state.data);
    const { selectedItems } = this.state;

    return (
      <div>
        <h1>Hello WOrld</h1>
        <MultiSelect
          items={this.state.data}
          uniqueKey="id"
          selectedItems={selectedItems}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

export default Multilist;

1 Ответ

0 голосов
/ 20 мая 2019

Я только что понял, что делаю неправильно.

Мои данные googleData были отформатированы как 

 [{name:xpto, age:42}, {name:abc, age:54}]

, когда я меняю "имя" на "ярлык", это работает !! :)

Так что моя электронная таблица googleData должна выглядеть примерно так: 

[{label:xpto, age:42}, {label:abc, age:54}]

Итак, код, который работает для меня: 

render(){
const { selectedItems, data } = this.state;
    return (
      <div>
        <h1>Hello WOrld</h1>
        <MultiSelect
          items={data}
          selectedItems={selectedItems}
          onChange={this.handleChange}
        />
 );
  }

Один вопрос, если кто-нибудь может помочь, поскольку у меня есть данные, полученные из электронной таблицы Google, есть ли способ внести изменения или сообщить приложению, что столбец, который я хочу обозначить, - это столбец с именем «Nome».

Что-то вроде 

let label = row.Nome

если это имеет смысл .. Спасибо

...