React-如何通过键值更新状态

Question

我正在学习React，但是我不完全了解的事情是在拥有大型数据结构时更新状态的最佳方法。 下面是我正在做的简化示例，因此在父组件中，我将状态设置为如下所示

getInitialState: function(){
    return {
        initialItems: [
            {"id": 1, "name": "Apples", "description": "Description"},
            {"id": 2, "name": "Broccoli", "description": "Description"},
            {"id": 3, "name": "Chicken", "description": "Description"},
            {"id": 4, "name": "Duck", "description": "Description"}
        ],
        items: []
    }
},

然后，我在该组件中有一个函数来更新描述，并使用props传递给子组件

update_description: function(id, description) {
    var state = this.state.items.map(function(item) {
        return {
            id: item.id,
            name: item.name,
            description: (item.id === id ? description: item.description),
        };
    }, this);

    this.setState({ items: state });
},

然后在我的渲染功能

render: function() {
    return (
        <List items={this.state.items}  update_description={this.update_description} />
    );
}

还有我的孩子

var List = React.createClass({
  render: function(){
    return (
      <ul className="no-list no-pad items">
      {
        this.props.items.map(function(item) {
            return <ListItem key={item.id} item={item} update_description={this.props.update_description} />
        }, this)
       }
      </ul>
    )  
  }
});

这行得通，但是似乎效率很低（特别是如果您具有大型数据结构），因为代码在所有项目中循环并检查ID是否匹配以及是否更新了描述。 同样，使用这种方法，如果我向每个项目（如“ image”）添加另一个属性，则必须记住要更新update_description函数。

理想情况下，我希望有一种方式可以说：“更新ID等于我要传递给函数的ID的描述属性”。 就像您在SQL中一样。

这可能吗？ 目前，我仅使用React，但愿意使用其他库和工具来帮助我。

Answer 1

在算法级别，您要维护元素的无序数组，并对特定元素执行线性搜索。 如您所述，这不是很有效。 而不是使用数组，您应该使用哈希表，该表将允许摊销恒定时间查找。 在JavaScript中，您可以使用对象，也可以使用ES2015中引入的Map（） ，因此并非所有浏览器都支持。

通过使用id作为对象/地图的键，在update_description()函数中，您可以直接访问与该键关联的元素。 由于在这种情况下这些元素是对象，因此您可以修改该特定对象的description属性。 您仍然需要调用this.setState({})才能重新渲染React。

有关将setState()与可变数据结构结合使用的更多信息，请参见setState（） 。

Answer 2

我的答案不是关键值，但它非常有效。 您可以只在render函数中传递项目的索引。 我也想到了带有id键的对象。 但是您不能确保循环时的顺序是您想要的。

var List = React.createClass({
  render: function(){
    return (
      <ul className="no-list no-pad items">
      {
        this.props.items.map(function(item, index) {
            return <ListItem key={item.id} item={item} index={index} update_description={this.props.update_description} />
        }, this)
       }
      </ul>
    )  
  }
});

并将其传递给update_description，然后可以使用索引来更新描述。

update_description: function(index, description) {
    var items = this.state.items;
    items[index].description = description;
    this.setState({ items: state });
},