当使用 React 的 use state hook 使用它的 prev （或初始）值设置状态时抛出错误 Type Error 0 is not a function

Question

我使用的是非常基本的提供商设置。我确定我的组件包含在提供程序中，并且应该将值传递给子组件。

const { totalData } = useContext(Context);
const [setTotal] = totalData;

我在这里提取了一个设置方法来设置所选项目的总成本。在我的提供商方面

const [total, setTotal] = useState(0);

我就是这样公开这个状态的

 <Context.Provider
  value={{
    totalData: [total, setTotal],
  }}>
  {props.children}
</Context.Provider>

在这种情况下，当按下按钮时，React Native TouchableOpacity 我正在像这样设置状态；

setTotal(prev => checked ? prev + item.total_cost : prev - item.total_cost)

非常感谢任何关于如何发生这种情况的想法。

谢谢！！

Answer 1

您正在使用数组来存储您的值和 setter 函数，您将 total 设置为第一个值（索引 0）并将 setTotal 设置为第二个值（索引 1）。

问题是当你写 const [setTotal] = totalData; 时，你实际上是在获取 totalData 数组中的第一个值（即 total）并将其重命名为 setTotal.

所以现在您尝试调用 setTotal()，但您实际上是在编写 total()，这给了您错误。

解法：

将这些值作为键存储在对象中会是更好的开发人员体验，这样您就可以按照自己的方式对它们进行解构。

更改您的上下文提供程序：

<Context.Provider value={{ totalData: { total, setTotal } }}>
  {props.children}
</Context.Provider>

然后像这样使用它：

const { totalData } = useContext(Context);
const { setTotal } = totalData;

注：

如果你真的想像原来那样继续使用数组，那么你可以像这样解构它：

const [_, setTotal] = totalData;
// Or
const setTotal = totalData[1];

这样您就可以获取数组中的第二项（set 函数），并简单地忽略第一个 (total) 值。

When setting state with React's use state hook using it's prev (or initial) value throws an error Type Error 0 is not a function