Question

我在组件中有一个usestate。像下面一样，

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

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

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

现在，在单击事件中，我正在调用一种运行某些操作的方法。

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

Answer 1

首先，您应该将a.ipa_price转换回number，因为toFixed返回字符串。

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

然后，您直接突变data对象，这就是为什么data对象被更改的原因，这几乎总是不好的做法。更好的方法之一就是这样。

 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]，您正在执行浅表复制。它不是在复制对象属性本身。

在不调用set函数的情况下UseState更新

1 个答案: