Question

通常不使用钩子，我使用componentWillReceiveProps，但是使用钩子我不能使用它们。

更新道具时如何更新状态元素，而不会陷入无限循环。

我正在尝试类似的操作，但是我却处于无休止的循环中。

我需要在数据表更改状态或页面等时更新数据表，然后仅在更改状态且与通过的原始表不同时才更新特定项。

我曾考虑过这样做，但是我并不真正喜欢将其作为解决方案。

    if(datatable !== state.datatable)
    setState({ ...state, datatable });

能给我一些建议吗？

function Datatable({ header, datatable = [], page = 1, perPage = 5, style }) {
    const [state, setState] = useState({
        datatable,
        page: page - 1,
        perPage,
        numberOfPages: Math.ceil(datatable.length / perPage),
    });

useEffect(() => {
        setState({ ...state, datatable });
 });
 ....
}

Answer 1

您需要将datatable作为对useEffect挂钩的依赖项，

useEffect(() => {
        setState({ ...state, datatable });
},[datatable]);

现在，仅当datatable更改时，钩子才会执行。

Answer 2

将prop值置于一种状态是一种不好的模式。这样，您就有两个datatable值的真实来源。另外，您的组件将通过更改道具本身来重新渲染，而您无需将其置于状态。

以下代码将满足您的要求：

function Datatable({ header, datatable = [], page = 1, perPage = 5, style }) {
    const [state, setState] = useState({
        page: page - 1,
        perPage,
        numberOfPages: Math.ceil(datatable.length / perPage),
    });
 ....
}

当特定props元素发生更新时，React Hooks会更新状态元素

2 个答案: