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

Question

我正在使用多重选择列表来响应 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 数组中。

例如

存储.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));
};