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

我只是明白我在做错什么。

我的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

如果有任何意义.. 谢谢

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

1 个答案: