时间戳

首页 > 解决方案 > 反应本机多选

react-native - 反应本机多选

问题描述

我是 React Native 的新手

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

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

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

我应该使用 Redux 还是使用本机反应？

任何帮助，将不胜感激！！

谢谢！！

标签： react-nativemulti-selectpass-data

解决方案

我相信您描述的问题是由于以下原因：

在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.

推荐阅读