React Native 多选

Question

我是 React Native 新手

我正在尝试创建一个多选视图，用户可以在其中选择和取消选择项目，然后所选项目应传回到前一个容器，当用户返回到下一个视图时，应检查所选项目。

我正在尝试实施，但遇到的问题是无法准确更新数据。当我再次返回屏幕时，它仅显示 1 个选定的项目。

谁能告诉我最好的方法，或者是否有任何教程。

我应该使用 Redux 还是使用 React Native？

如有任何帮助，我们将不胜感激！！

谢谢！！

Answer 1

我认为您所描述的问题是由于以下原因造成的：

在

componentDidMount

中，您循环调用

updateItemWithSelected

。此

updateItemWithSelected

调用既会覆盖每次调用中所有

checked

值的

arrayHolder

属性，也不使用

updater

函数版本的

setState

，因此后面的循环调用可能会覆盖之前的循环调用，因为

setState

是异步且批量的。如果您在其他地方没有使用

updateItemWithSelected

，您应该将

componentDidMount

简化为：

  componentDidMount() {
    const selectedTitles = {};
    const { state } = this.props.navigation
    const params = state.params || {}; 
    if (params.data.length){
      params.data.forEach((element) => {
        // create a map of selected titles
        selectedTitles[element.title] = true;
      })
    }
    const arrayHolder = this.array.map(item => {
      // map over `this.array` and set `checked` if title is in `selectedTitles`
      return {...item, checked: !!selectedTitles[item.title]};
    });
    this.setState({ arrayHolder });
  }

并删除

updateItemWithSelected

。

Answer 2

尝试这个轻量级且完全可定制的包 - https://www.npmjs.com/package/rn-multipicker

完整文章：https://dev.to/rahul04/add-multi-select-dropdown-to-react-native-applications-53ef