从桌面反应拉取数据到多选

Question

正在尝试使用 Tabletop 为 Google 电子表格填充 Multiselect list。

从桌面获取数据没有问题，但是当尝试将其发送到 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;

Answer 1

我刚刚明白我做错了什么。

我的google数据格式如下

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

，当我将 "name" 更改为 "label" 时，它起作用了！！ :)

所以我的google数据传播sheet应该是这样的

[{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 传播 sheet 的数据，有没有办法进行更改或告诉应用程序我想要标签的列是名称为 "Nome" 的列。

类似

let label = row.Nome

如果有任何意义.. 谢谢

从桌面反应拉取数据到多选

React Pull Data from Tabletop to Multiselect

google-sheets

tabletop.js