在 React 中，我正在使用劍道網格。我有一個充滿狀態陣列的網格，如下所示：
const [tempAtributi, setTempAtributi] = useState([]);
// ...
const MyCommandCell = (props) => {
const indexObj = tempAtributi.findIndex(
(e) => e.atribut_id === props.dataItem.atribut_id
);
const Remove = () => {
if (indexObj > -1) {
const lista = tempAtributi;
lista.splice(indexObj, 1);
setTempAtributi(lista);
}
};
return (
<td className="k-command-cell">
<Button
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-remove-command"
onClick={() => Remove()}
>
<FaTrash /> Remove
</Button>
</td>
);
};
const Cell = (props) => <MyCommandCell {...props} />;
useEffect(() => {
(async () => {
try {
const resAtr = await services.getTemplateAtributi(
state.data.sn_template_id
);
setTempAtributi(resAtr.data.rlista);
} catch (e) {
console.log(e);
}
})();
}, []);
//...
return (
<>
<Grid data={tempAtributi}>
<GridColumn field="name" title="Atribut" filter="text" />
<GridColumn cell={CommandCell} title="remove" filter="text" />
</Grid>
</>
);
因此，在渲染時，我在 useeffect 中呼叫 API，并用物件陣列填充 tempAtributi 狀態。我的網格被填滿了。之后，我有一個列洗掉，您可以在其中單擊和單擊，檢查該屬性是否在物件的 tempAtribute 陣列內。如果是，我用一個物件陣列減去被洗掉的物件來更新 tempAtributi 狀態。完成洗掉后，我必須單擊確認呼叫 API 并將 tempAtributi 狀態設定為更新/新值（如果在單擊確認后呼叫 services.getTemplateAtributi，我將獲得更新的值）：
<Button themeColor={"primary"} style={{marginTop:'2%', marginRight:'2%'}} onClick={() => Confirm()}>
Confirm
</Button>
如果我單擊洗掉一次或多次（沒有確認）一切正常，如果我控制臺記錄狀態，它沒有得到洗掉的物件，但問題是我仍然可以在網格中看到該物件，即使它是不再處于 tempAtributi 狀態。我想在單擊remmove后重繪 網格，這樣該行就不存在了。我不知道洗掉后如何重繪 網格，因為如果我呼叫useeffect，它會呼叫API并將其設定為乞求值。需要幫助！
uj5u.com熱心網友回復：
我的第一個猜測是洗掉深層物件副本。由于 JavaScript 中的克隆物件將它們緊密聯系在一起。你可以用一個簡單的例子來測驗：
const a = { b: { c: 'd' } } }
const b = a
b.b.c = 'e'
console.log(a, b)
如您所見，a 和 b 具有相同的值，但我們只改變了其中一個。b = JSON.parse(JSON.stringify(a))您可以使用最常用的方法來消除這種聯系。
因此，在您的示例中，您的洗掉功能應如下所示：
const Remove = () => {
if (indexObj > -1) {
const deepCopy = JSON.parse(JSON.stringify(tempAtributi));
deepCopy.splice(indexObj,1);
setTempAtributi(deepCopy);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/458887.html
標籤：javascript 反应 反应钩子