使用 ReactJS 合并数组元素的属性

Question

考虑这个由服务器 AJAX 请求返回的 JSON 结构：

{
  "Items": [
  {
    "ID": 1,
    "Name": "John Smith"
  },
  {
    "ID": 2,
    "Name": "Jane Doe"
  }
]}

还有一个将 JSON 数据设置为视图组件状态的 Fetch 函数：

FetchData(json => {
  this.setState({
    Items: json.Items,              
  })
})

在组件树的下方有一个带有复选框的 React 组件，其 render() 方法如下所示：

render(){
  return (
    <input type="checkbox" checked={this.props.Item.IsSelected} onClick={this.handleToggleItemEvent.bind(this)} />
    <span>{this.props.Item.Name}</span>
  );
}

主视图组件有一个handleToggleItemEvent，负责设置item的IsSelected状态：

handleToggleItemEvent(ID){
  var item = _.find(this.state.Items, item => {
    return item.ID === ID;
  });

  if(item){
    item.IsSelected = !item.IsSelected;
    this.setState({
      items: this.state.Items
    });
  }
}

如果单击第一项的复选框，则对象将如下所示：

{
  "Items": [
  {
    "ID": 1,
    "Name": "John Smith",
    "IsSelected": true
  },
  {
    "ID": 2,
    "Name": "Jane Doe"
  }
]}

因为 IsSelected 状态是应用程序内部的，而不是从服务器返回的，所以当我再次获取数据（比如通过过滤数据）时，IsSelected 属性会消失。将这些数据合并在一起的最佳方法是什么（或者这完全是一个坏主意）？我见过Immutability Helpers，但我不确定如何使用它们来合并数组中每个元素的属性。

Answer 1

我不认为在模型中保留IsSelected 是最好的方法，因为IsSelected 拥有view/controller-specific 值，而其余属性是model-specific。

您可以更改模型并添加 selectedItems 字典并将 id 保留在那里（这也简化了handleToggleItemEvent）：

handleToggleItemEvent(ID){
    var selectedItems = this.state.selectedItems;
    selectedItems[ID] = true;
    this.setState({selectedItems: selectedItems})
}

您还必须更新 render 方法以检查基于 state.selectedItems 的复选框。

我还建议在 getInitialState() 中初始化它：

getInitialState() {
    return {selectedItems:{}};
}