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 });
},