我一直在玩 react-beautiful-dnd 和 hooks（非常新的反應） - 由于某種原因，我的狀態不會在拖動時更新。（編輯：我知道該邏輯僅適用于“相同類別”拖動 - 這對我來說也沒有更新 UI）
資料（簡化）
const skills = {
skills: {
skill1: {
id: "skill1",
name: "Communication"
},
skill2: {
id: "skill2",
name: "Empathy"
},
skill3: {
id: "skill3",
name: "Initiative"
}
},
categories: {
cat1: {
id: "cat1",
name: "Core",
skillIds: ["skill1", "skill2", "skill3", "skill4"]
},
cat2: {
id: "cat2",
name: "Craft",
skillIds: ["skill5", "skill6", "skill7", "skill8"]
},
cat3: {
id: "cat3",
name: "Leadership",
skillIds: ["skill9", "skill10"]
}
},
categoryOrder: ["cat1", "cat2", "cat3"]
};
用于更新skillIds正確類別中的陣列的函式
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const onDragEnd = (result) => {
const { source, destination } = result;
// dropped outside the list
if (!destination) {
return;
}
// Handle moving within one category
if (source.droppableId === destination.droppableId) {
const catSkills = data.categories[source.droppableId].skillIds;
const items = reorder(catSkills, source.index, destination.index);
const newData = {
...data,
categories: {
...data.categories,
[source.droppableId]: {
...data.categories[source.droppableId],
skillIds: items
}
}
};
setData(newData);
}
};
我創建了一個簡化的代碼沙箱來測驗 - https://codesandbox.io/s/hooks-problem-il5m4
任何幫助表示贊賞！
uj5u.com熱心網友回復：
我可以看到狀態正在更新
if (source.droppableId === destination.droppableId) { setData(data) }
這個“if”子句意味著它只會在拖動發生在同一條車道上時更新狀態。我認為你已經試圖將它拖到另一條車道上。希望這就是你的意思
編輯：我已經理解你的問題。問題是你沒有使用更新的資料你正在回圈靜態技能。我希望這能解決你的問題
{data.categoryOrder.map((catId) => {
const category = data.categories[catId]; //change skills to data
const catSkills = category.skillIds.map(
(skillId) => skills.skills[skillId]
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337015.html