Javascript 当更新特定的props元素时，React钩子会更新state元素

通常不使用钩子，我使用的组件将接收道具，但使用钩子我不能使用它们

当道具更新时，如何更新状态元素，而不进入无限循环

我曾经尝试过这样的事情，但我会在无休止的循环中前进

我需要在datatable更改状态或页面等时更新它，然后仅更新特定项（如果它更改状态并且与传递的原始项不同）

我曾想过这样做，但我真的不喜欢它作为解决方案

    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 });
 });
 ....
}

---

您需要将

datatable

作为依赖项传递给

useffect

hook

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

---

现在，仅当

datatable

更改时，钩子才会执行。

您需要将

datatable

作为依赖项传递给

useffect

钩子

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

---

现在，您的钩子将在数据表仅发生更改时执行。

将属性值置于状态是一种错误的模式。通过这种方式，

datatable

值有两个真实来源。此外，您的组件将通过更改道具本身来重新渲染，您无需将其置于状态

以下代码将执行您想要的操作：

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

---

将道具值置于状态是一种糟糕的模式。通过这种方式，

datatable

值有两个真实来源。此外，您的组件将通过更改道具本身来重新渲染，您无需将其置于状态

以下代码将执行您想要的操作：

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

---

useffect

接受第二个参数：

useffect

接受第二个参数：谢谢你，我已经尝试过了，但是没有用，如果道具参数被更新为只更新而不触及其他参数，有什么办法吗？或者唯一的方法就是声明这么多的useEffects，它们可以更改多少道具？谢谢你，我已经尝试过了，但是没有用，如果道具参数更新为只更新而不触及其他道具，有什么方法可以做到吗？或者唯一的方法就是声明这么多的useEffects，它们可以改变多少道具？那么你会怎么做？你能给我举个例子吗？你可以只使用状态的真值，我不使用道具，我只使用道具将值分配给状态的元素我更新我的答案，我希望它能解决你的问题。那么你怎么办？你能给我举个例子吗？你可以只使用状态的真值，我不使用道具，我只使用道具将值分配给状态的元素。我更新我的答案，希望它能解决你的问题。