React native 如何根据项目的状态将其填充和移除到数组中?

React native 如何根据项目的状态将其填充和移除到数组中?,react-native,react-jsx,React Native,React Jsx,我正在开发一款React原生Android应用程序 我正在从API接收数据(id和名称)。现在,我使用带有mkicontogle(react native material kit)的列表视图来显示列表数据。 使用mkicontogle,我可以为显示的项目提供两种不同的状态(单击=颜色为黑色/未单击=灰色)。现在,我想将单击的项目列表发送回我的服务器。但我就是搞不清楚我是如何将点击的项目放入数组或其他什么东西中,然后只将点击的项目发送到服务器 我的ListView渲染方法如下所示: <Li

我正在开发一款React原生Android应用程序

我正在从API接收数据(id和名称)。现在,我使用带有mkicontogle(react native material kit)的列表视图来显示列表数据。 使用mkicontogle,我可以为显示的项目提供两种不同的状态(单击=颜色为黑色/未单击=灰色)。现在,我想将单击的项目列表发送回我的服务器。但我就是搞不清楚我是如何将点击的项目放入数组或其他什么东西中,然后只将点击的项目发送到服务器

我的ListView渲染方法如下所示:

<ListView
   dataSource={this.state.dataSource}
   renderRow={this.renderList}
   horizontal={true}
   renderHeader={this.renderHeader}
/>

我希望我能解释清楚我的问题,否则就让我知道。我在编程和编写stackoverflow问题方面是新手,所以如果我做错了什么,请给我一些提示

根据您的信息,我必须做出一些假设才能回答您的问题

现在,我将假设选中的处理程序正确地返回与项目数组中的id相同的项目的“id”

因此,假设您的数组是:

[{name: 'Luke', id: 1'}, {name: 'Darth', id: 2'}]
如果我点击“Luke”
,一个选中的
将收到一个
数据
对象,其中至少有
id:1

第二个假设是,您有一个数组,可以在其中存储单击的项目。我会把它放在你的组件之外,因为MK已经能够正确地呈现一个选中的项目了。因此:

var _checkedItems = []

var myComponent = React.create...
最后一个假设是传递给
\onIconChecked
数据
对象也包含有关复选框状态的信息,因此
date.checked
为true或false

所有这些项目的具体实现可能不同,但这就是我可以解决的问题

现在你可以做的是:

_onIconChecked: function (data) {
  var id = data.id;
  var checked = data.checked;

  var currentIndex = _checkedItems.indexOf(id)

  if(checked) {
    if(currentIndex == -1) { _checkedItems.push(id) }
    // the 'else' would mean the item is already in the array, so no need to add
  } else {
    if(currentIndex > -1) {
      // This means that the item is in the array, so lets remove it:
      _checkedItems.splice(currentIndex, 1) // This removes the id from the array.
    }
  }
}
您现在要做的是仅从您的
this.state.items
数组中获取ID位于选中数组中的项:

getCheckedItems: function() {
  return this.state.items.map(function(item) {
    if(_checkedItems.indexOf(item.id) > -1){
      return item
    }
  })
}

我不确定你的设置,所以我做了很多假设,可能设计了一些事情,但这可能会让你走上正确的方向

你能澄清一下,你是否真的拥有被检查的
\u onIconChecked
,或者你是否正在考虑将其作为一种选择?另外,你能在函数中发布“数据”是什么样子的吗?你能告诉我们数据源是什么样的吗?我还没有使用onIconChecked,我只是认为它是一个占位符,我想我应该用它来更新我点击的项目。数据实际上是以JSON对象的形式从API获取的数据:数据:{id:someIDString,name:someNameString}。我的数据源需要数组对象,它与从我的API获取的数据完美匹配。谢谢你的回答。这真的让我大开眼界。唯一错误的假设是,没有数据。每次“点击”一个项目时,都会调用onIconChecked。所以我不会得到任何类型的数据。检查,这实际上是不坏的?!没有关系。。。现在我只需要再解决一件事。当我“松开”其中一个项目时,或者换句话说,如果我第二次单击某个项目(开始状态为false/unclicked),它将不会从数组中删除。不知道为什么…好吧,忘了我刚才的评论。回答得好,回答得正确。你帮了我很多!我唯一不需要的就是数据检查。非常感谢,很有魅力now@user5493582伟大的很高兴我能帮忙。
_onIconChecked: function (data) {
  var id = data.id;
  var checked = data.checked;

  var currentIndex = _checkedItems.indexOf(id)

  if(checked) {
    if(currentIndex == -1) { _checkedItems.push(id) }
    // the 'else' would mean the item is already in the array, so no need to add
  } else {
    if(currentIndex > -1) {
      // This means that the item is in the array, so lets remove it:
      _checkedItems.splice(currentIndex, 1) // This removes the id from the array.
    }
  }
}
getCheckedItems: function() {
  return this.state.items.map(function(item) {
    if(_checkedItems.indexOf(item.id) > -1){
      return item
    }
  })
}