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

Question

考虑这个 JSON 结构，它由服务器 AJAX 请求返回:

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

还有一个 Fetch 函数，它将 JSON 数据设置为 View 组件的状态:

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，负责设置项目的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 特定的值，而其余​​属性是特定于模型的。

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

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

您还必须更新 render 方法，以根据 state.selectedItems 选中复选框。

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

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