为什么我的 Input 组件中的 setSetsValue 没有递增？

Question

我想增加我创建的输入组件内的值，它只需单击一次即可工作，然后在启动 pressHandler 的每个按钮按下时在 5 和 6 之间来回切换。为什么会这样？

这可能是关于 defaultValues 数组本身的问题，还是我的 setSetsValue 完全错误？

defaultValues[0].sets.totalSets 的值不应该在每次按下按钮后递增吗？还是我想的那么荒唐。

感谢您的帮助！

代码：

let defaultValues = [
    {
      sets: { totalSets: "4" },
      work: { min: "00", sec: "50" },
      rest: { min: "00", sec: "30" },
    },
  ];

  const [setsValue, setSetsValue] = useState(defaultValues[0].sets.totalSets);

  const pressHandler = () => {
    defaultValues[0].sets.totalSets =
      parseInt(defaultValues[0].sets.totalSets) + 1;
    setSetsValue(defaultValues[0].sets.totalSets.toString());
  };

我的输入组件：

function AppInput({ defaultValue }) {
  return (
    <TextInput
      underlineColorAndroid={"white"}
      keyboardType="numeric"
      defaultValue={defaultValue}
      editable={true}
      placeholderTextColor={"white"}
      style={styles.textInput}
    ></TextInput>
  );
}

Answer 1

看这个例子

let valueA = 1;
console.log(valueA); //log value
const handler = () => {
    valueA  = valueA + 1; //increase value
    setAnyStateValue(); //update state
  };

如果您调用 handler() 100 次 log results is : 1 !!!
为什么日志不增加???
因为 handler() 将通过函数 setAnyStateValue() 更新状态，并且每次更新状态时组件 rerender again 和 valueA 再次声明 let valueA = 1;

如何解决这个问题

解决方案一

setSetsValue(x => x + 1); //this will update value based on last value plus one

方案二

  const pressHandler = () => {
    setSetsValue(parseInt(setsValue) + 1);
  };

为什么我的 Input 组件中的 setSetsValue 没有递增？

Why doesn't my setSetsValue increment inside my Input component?

reactjs

react-native

react-state