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

考虑以下JSON结构，该结构由服务器AJAX请求返回：

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

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

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，但是我不确定如何使用它们来合并数组中每个元素的属性。

最佳答案

我认为将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:{}};
}

关于javascript - 使用ReactJS合并数组元素的属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29974409/

isSelected

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