如何使用setState更新對象數組中的對象

我正在使用React，我的狀態被定義爲一個對象數組。我需要能夠改變state.data陣列只在一個特定的元素，例如ID對象1如何使用setState更新對象數組中的對象

我想知道：

什麼是正確的方法如何使用setState()在這種情況下。

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
    data: [{ 
 
     id: 0, 
 
     title: 'Buy a', 
 
     status: 0, // 0 = todo, 1 = done 
 
     }, 
 
     { 
 
     id: 1, 
 
     title: 'Buy b', 
 
     status: 0, 
 
     }, 
 
     { 
 
     id: 2, 
 
     title: 'Buy c', 
 
     status: 0, 
 
     } 
 
    ] 
 
    }; 
 
    this.onTitleChange = this.onTitleChange.bind(this); 
 
} 
 
onTitleChange(id, title) { 
 
    console.log(id, title); 
 
    debugger 
 
}

來源

2017-08-25 Radex

你可以得到做的克隆狀態對象使用spread運算符，然後找到對象的索引使用findIndex方法的給定ID的數組修改對象並設置狀態。

constructor(props) { 
    super(props); 
    this.state = { 
    data: [{ 
     id: 0, 
     title: 'Buy a', 
     status: 0, // 0 = todo, 1 = done 
     }, 
     { 
     id: 1, 
     title: 'Buy b', 
     status: 0, 
     }, 
     { 
     id: 2, 
     title: 'Buy c', 
     status: 0, 
     } 
    ] 
    }; 
    this.onTitleChange = this.onTitleChange.bind(this); 
} 
onTitleChange(id, title) { 
    var data = [...this.state.data]; 
    var index = data.findIndex(obj => obj.id === id); 
    data[index].title = title; 
    this.setState({data}); 
}

來源

2017-08-25 09:18:55

好的答案。只是想指出@Radex應該謹慎使用'setState'：'onTitleChange'函數不應該被調用到組件正在更新的生命週期方法中（例如componentDidUpdate），因爲否則它會導致無限循環。預先檢查此文檔條目https://facebook.github.io/react/docs/state-and-lifecycle.html – Fotis

一個簡單的解決辦法是：

const idx = this.state.data.findIndex(obj => obj === id); 
this.state.data[idx].title = title;

對於更復雜的成分，我會建議使用Immutable.js List

來源

2017-08-25 09:18:55

我需要使用setState，否則組件會在更新時渲染屬性 – Radex

我會用傳播運營商來更新狀態。

onTitleChange(id, title) { 
    const { data } = this.state 
    const index = data.findIndex(d => d.id === id) 

    this.setState({ 
    data: [ 
     ...data.slice(0, index), 
     { 
     ...data[index], 
     title: title, 
     }, 
     ...data.slice(index + 1) 
    ] 
    }) 
}

來源

2017-08-25 09:27:38 mersocarlin

你也可以做這樣的事情：

onChange = (id, value, field) => { 
    this.setState((prevState) => ({ 
      data: prevState.data.map((d, index) => { //d = object, index = index in array 
       if (d.id === id) { 
        return { 
         ...d, 
         [field]: value //field/name in object 
        } 
       } 
       return d 
      }) 
     }),() => { 
      console.log("New value of", field, "=", value, "in object with id", id); 
     }); 
}

來源

2017-08-25 09:31:02 Nocebo

您還可以修改你

存儲在下面的格式

爲國家的方式緩解，希望這有助於！

constructor(props) { 
    super(props); 
    this.state = { 
    data: [ 
    0: { 
     id: 0, 
     title: 'Buy a', 
     status: 0, // 0 = todo, 1 = done 
     }, 
    1: { 
     id: 1, 
     title: 'Buy b', 
     status: 0, 
     }, 
    2: { 
     id: 2, 
     title: 'Buy c', 
     status: 0, 
     } 
    ] 
    }; 
    this.onTitleChange = this.onTitleChange.bind(this); 
} 

onTitleChange(id, title) { 
    var newData = [...this.state.data]; 
    newData[id].title = title; 
    this.setState({newData}); 
}

來源

2017-08-25 09:43:00 mindaJalaj

如何使用setState更新對象數組中的對象

回答

相關問題