状态改变后如何重新渲染

Question

在 React 中，我正在使用 Kendo 网格。我有一个网格，其中填充了这样的状态数组：

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 状态。我的网格已满。之后，我有一列删除，您可以在其中单击和单击，检查该属性是否在对象的 tempAtributi 数组内。如果是，我用一个对象数组减去被删除的对象来更新 tempAtributi 状态。完成删除后，我必须单击确认调用 API 并将 tempAtributi 状态设置为 updated/new 值（如果我在单击确认后调用 services.getTemplateAtributi，我将获得更新值）：

<Button themeColor={"primary"} style={{marginTop:'2%', marginRight:'2%'}} onClick={() => Confirm()}>
    Confirm
</Button>

如果我点击删除一次或多次（没有确认）一切正常，如果我控制台记录状态，它没有得到删除的对象，但问题是我仍然可以在网格，即使它不再处于 tempAtributi 状态。我想在单击 remmove 后刷新网格，以便行不是 there.I 不知道如何在删除后刷新网格，因为如果我调用 useeffect，它将调用 API 并设置它的乞讨值。需要帮助！

Answer 1

我的第一个猜测是删除深层对象副本。由于 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);
  }
}

状态改变后如何重新渲染

How to re-render after state has changed

javascript

reactjs

react-hooks