在状态更新函数中调用状态更新函数 - React Functional 组件中的 useState 挂钩

Question

我有一个更新两个状态的回调函数。

状态变量的简单增量和设置
利用第一个状态的更新状态值从第一个状态的状态更新函数中更新另一个状态。

示例代码如下，

const [index, setIndex] = useState(-1);
const [fields, setFields] = useState([]); 

const callbackFunction = () => {
    setIndex(prevState => {
        const newIndex = prevState + 1;
        setFields(prevState => [...prevState, {id: newIndex, question: "", type: ""}]);
        return newIndex;
    });
};

//I will be calling the callbackFunction somewhere over here in my JSX

请注意，我最初的描述可能无法准确描述代码。如果是这样，我们深表歉意。

我想知道我实现的代码是不是

反模式与否
会导致我目前没有看到的任何问题

对我来说，危险信号是状态更新中的状态更新。

在此先感谢您提供任何启发我的信息。

Answer 1

它是一种反模式，因为它不是自定义挂钩，而是 useState。
以后调试起来会比较麻烦

您可以做的是：


const callbackFunction = () => {
    const newIndex = index+ 1;
    setIndex(newIndex);
    setFields([...fields, {id: newIndex, question: "", type: ""}]);
};

这种 IMO 方式更清晰、更直接，没有嵌套代码，内部没有额外的回调函数 setState，应该可以正常工作。

Answer 2

就这么办

const [index, setIndex] = useState(-1);
const [fields, setFields] = useState([]); 

const callbackFunction = () => {
const newIndex = index+ 1;
    setIndex(prevState => newIndex);
 setFields(prevState => [...prevState, {id: newIndex, question: "", type: ""}])
};

您的意图很明确，为什么要尝试更新 setIndex 中的 setFeilds。您想要获取更新后的索引并将其传递给 setFeilds。当然，您在这里尝试做的是一种反模式。你可以简单地按照上面的方法来实现你想要的。

在状态更新函数中调用状态更新函数 - React Functional 组件中的 useState 挂钩

Calling a state update function within a state update function - useState hook in React Functional component

javascript

reactjs

react-functional-component

use-state