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: ""}])
};

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

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

2 个答案: