如何在 react-native-sectioned-multi-select 中预先选择项目？

Question

我正在使用多选列表来 React Native。它是 react-native-sectioned-multi-select。

我用它来输入数据以形成表格。使用选择列表插入数据时，它工作正常。没问题。现在，我需要编辑表格。因此，当我加载表单时，它不会将所选项目加载到选择列表中。我使用 onSelectedItemsChange 加载数据。但是，我遇到了一个错误。如果我使用按钮调用该函数，它不会自动调用该函数，而是加载选定的项目。但是，我需要在不手动单击按钮的情况下执行此操作。

这是我关于多选的代码。

             <SectionedMultiSelect
                  items={this.state.items}
                  uniqueKey="id"
                  subKey="subItem"
                  selectText="Select"
                  confirmText="Select"
                  searchPlaceholderText="Search"
                  removeAllText="Clear all"
                  showDropDowns={true}
                  readOnlyHeadings={true}
                  showCancelButton={true}
                  showRemoveAll={true}
                  onSelectedItemsChange={this.onSelectedItemsChange}
                  selectedItems={this.state.selectedItems}


onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems});
};

当我尝试自动设置 selectedItems 的状态时，它会给出错误。但是，如果我通过按下按钮设置 selectedItems 的状态，它会起作用并显示所选项目。

在这种情况下谁能帮助我？

https://github.com/renrizzolo/react-native-sectioned-multi-select

onSelectedItemsChange

Answer 1

您需要将项目保存在异步存储中。当您编辑表单时，获取项目存储并将它们添加到 selectedItems 数组。

例如

storage.js

// create function for saving items to storage
export const SaveItem = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
    console.log('saved');
  } catch (e) {
    console.log(e);
  }
};

// create function for saving items to storage
export const ReadItem = async key => {
  try {
    var result = await AsyncStorage.getItem(key);
    return result;
  } catch (e) {
    return e;
  }
};

并使用函数读取和保存数据，使用每个表单名称作为键。喜欢SaveItem('form1', [23,34,45])。导入组件中的函数。

import { SaveItem, ReadItem } from './storage';

// get items for a form
editForm = key => {
  ReadItem(key).then(res => {
    const selected = JSON.parse(result);

    this.setState({
      selectedItems: selected
    });
  });
};

// save form data using each forms name 
saveItems = (key, value) => {
  const items = JSON.stringify(value);

  SaveItem(key, items)
    .then(res => {
      console.log('saved', res);
    })
    .catch(e => console.warn(e));
};