Javascript 在react中使用状态更新而不调用set函数

我在组件中有一个usestate。如下图所示

const [ data, setData ] = useState([]);
const [ updated, setUpdated ] = useState([]);

现在，当组件装入数据变量时，我正在存储一个数组

useEffect(() => {
    setData(props.arr)
}, []);

现在，在一个click事件上，我调用了一个运行某些操作的方法

const click = () => {
       const resp = resolveServices([...data]);
       setUpdated(resp);
     }

const resolveServices = (arr) => {
        for(const a of arr) {
            a.ipa_price = a.ipa_price.toFixed(2)
        }
        return arr;
    }

现在，这会自动更改我的数据状态，即使我没有调用setData方法

知道为什么会发生这种情况以及如何预防吗。我不希望状态改变，除非调用setData方法

下面是沙盒链接

https://codesandbox.io/s/optimistic-greider-4no3d?file=/src/App.js

---

首先，您应该将a.ipa_价格转换回数字，因为toFixed返回字符串

    const resolveServices = (arr) => {
        for(const a of arr) {
            a.ipa_price = Number(a.ipa_price.toFixed(2))
        }
        return arr;
    }

然后您直接变异

数据

对象，这就是为什么

数据

对象被更改的原因，这几乎总是不是一个好的做法。更好的方法之一就是这样

 const resolve = (arr) => {
    const newArr = [];
    for (const a of arr) {
      newArr.push({
        ipa_price: Number(a.ipa_price.toFixed(2))
      });
    }
    return newArr;
  };

您还可以在

resolveServices（[…data]）

之后直接记录数据来检查它。

---

通过执行

[…data]

，您执行的是浅层复制。它不是复制对象属性本身。

在组件装载后运行

useffect

中的回调，因此调用

setData

，这应该发生。@FullstackGuy不，当我更新“updated”状态时，数据状态会更改。我知道它将在组件安装时首先更新。但当我运行函数并更新其他状态时，它会更新。