javascript - 将数组转换为对象以选择对象(重构/优化)

Question

虽然我在迭代array 来渲染对象时面临加载时间缓慢的问题，但我想更改其数据结构。我显示了季节的目录。当用户单击一个项目时，该项目被标记为已选中。

这是当前的数据结构(数组)

const seasons = [{
  id: 6,
  value: 'All',
}, {
  id: 7,
  value: 'Spring',
}, {
  id: 8,
  value: 'Summer',
}, {
  id: 9,
  value: 'Fall',
}, {
  id: 10,
  value: 'Winter',
}];

我现在将选定的季节 ID 存储为数组

state = {selectedSeasonIds: []}

当 selectedSeasonIds 有 id 时，我想从中删除 id。否则，将 id 添加到 selectedSeasonIds。 (这是当前的方法)

if(_.includes(this.state.selectedSeasonIds, id)) {
    let newSelectedSeasonIds = _.filter(this.state.selectedSeasonIds, (curObject) => {
        return curObject !== id;
    });
    this.setState({selectedSeasonIds : newSelectedSeasonIds});
} else {
    let newSelectedSeasonIds = [...this.state.selectedSeasonIds, id];
    this.setState({selectedSeasonIds : newSelectedSeasonIds});
}

这是我的伪代码，用于重构以将我的数组转换为对象结构以提高性能。 (我发现在对象上搜索比在数组上搜索快得多)

将数组更改为对象

const seasons = {
    6 :{
      id: 6,
      value: 'All',
    },
    7: {
      id: 7,
      value: 'Spring',
    }, 
    8: {
      id: 8,
      value: 'Summer',
    },
    9: {
      id: 9,
      value: 'Fall',
    }, 
    10: {
      id: 10,
      value: 'Winter',
    }
};

更改选定的季节 <- 我只想存储对象的键 (id)。但是我想把它当作一个对象来使用

state = {selectedSeasonIds : {}} Can I store object type state? 

这是比数组搜索快 50 倍的预期逻辑。

if(selectedSeasonIds[id]) {
    //remove
    return _.omit(state.selectedSeasonIds, id); < is this right?
} else {
    //add
    return {...state.selectedSeasonIds, [id]:id} <- Does this look ok?
}

好吧，如果你认为这是对的，你可以复制我的代码并将其粘贴到答案中(我也会编辑我的问题)。

否则，您能否提供更好的建议或发现错误？

非常感谢

Answer 1

我想您必须循环遍历 seasons 才能渲染它们。

我的第一个建议是在每个中添加 selected Prop ，这样您就不必在每次渲染时都检查 selectedSeasonsIds 。

如果这不是一个选项，您仍然可以保留 key value 方法。

onAdd(id) {
  this.setState({
    selectedSeasonsIds: {
      ...this.state.selectedSeasonsIds,
      [id]: this.state.selectedSeasonsIds[id] ? false : true 
    }
  })
}

在检查特定季节是否被选中时，只需:

render() {
  const { seasons, selectedSeasonsIds } = this.state

  return (
    <div>
      ...
      {Object.keys(seasons).map(key =>
        <ItemComponent
          {...propsThatYouMightNeed}
          selected={selectedSeasonsIds[key]}
        />
      )}
    </div>
  )
}