反应本机多选

Question

我是 React Native 新手

我正在尝试创建一个 multiselect 视图，用户可以在其中 select 和 deselect 项目，然后 selected 项目应该传回上一个容器，当用户返回下一个视图时，应检查 selected 项目。

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

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

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

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

谢谢！！

Answer 1

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

在 componentDidMount 中，您正在循环调用 updateItemWithSelected。此 updateItemWithSelected 调用既覆盖了每次调用中所有 arrayHolder 值的 checked 属性，也不使用 setState 的 updater 函数版本，因此由于 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.

反应本机多选

React Native Multiselect

pass-data

multi-select

react-native