我們如何正確地更新一個物件中的專案?我試圖根據我的db.response的結果來更新專案isComplete = true 或 false
如果我所做的已經是正確的,你能不能向我解釋一下是什么讓它發揮作用的
。目前,我正在使用this.setState(),我在我的componentDidMount中傳遞了一個道具,其值如下
{
"dbResponse"/span>: {
"__v": 0,
"_id": "6149f01736503d7aa9fb138b",
"instantMessage": false。
"isComplete": false。
},
"operationType": "todo_update"
// Works
狀態 = {
list: [], //這個串列是由組件上的一個道具填充的。
};
case 'todo_update'/span>:
const {list} = this.state。
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id == data.dbResponse._id。
);
//Update object's isComplete property.。
list[objIndex].isComplete = data.dbResponse.isComplete;
break;
//不起作用。它洗掉了最后一個物件。
case 'todo_update':
const listStore = [];
const {list} = this.state。
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id == data.dbResponse._id。
);
//Update object's isComplete property.。
list[objIndex].isComplete = data.dbResponse.isComplete。
listStore.push(list[objIndex])。
setState({list: listStore})
break。
uj5u.com熱心網友回復:
情況1
case 'todo_update':
const {list} = this.state。
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id == data.dbResponse._id。
);
//Update object's isComplete property.。
list[objIndex].isComplete = data.dbResponse.isComplete;
break。
在這種情況下,state.list確實被更新了,但它并沒有重新渲染Component。因為list[objIndex].isComplete = data.dbResponse.isComplete;正在更新你的state而沒有使用setState這被稱為Data Mutation。這不是一個正確的更新state的方法
。
情況2
// does not work. 它洗掉了最后一個物件。
case 'todo_update':
const listStore = [];
const {list} = this.state。
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id == data.dbResponse._id。
);
//Update object's isComplete property.。
list[objIndex].isComplete = data.dbResponse.isComplete。
listStore.push(list[objIndex])。
setState({list: listStore})
break。
在這個listStore.push(list[objIndex]);負責清除你之前的資料。因為你只推送了一個資料 listStore.push(list[objIndex]);.
。
解決方案
case 'todo_update':
//這將避免DataMutation。
const {list} = { ...this.state };
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id == data.dbResponse._id。
);
//Update object's isComplete property.。
list[objIndex].isComplete = data.dbResponse.isComplete;
// This will update your state and re-render.
setState({ list })
break。
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/332286.html
標籤:
上一篇:韌體的空中演算法
