Mam użycie w komponencie. Jak poniżej,

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

Teraz przechowuję tablicę, gdy składnik mocuje się w zmiennej danych

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

Teraz na imprezie Click, dzwonię do metody, która działa pewną operację.

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;
    }

Teraz to automatycznie zmienia mój stan danych, nawet gdy nie dzwonię do metody SetData.

Każdy pomysł, dlaczego tak się dzieje i jak temu zapobiec. Nie chcę, aby stan się zmienił, chyba że nazywam metodą SetData.

Poniżej znajduje się link Sandbox.

https://codesandbox.io/s/optimistic-greider-4no3d?file=/src/App.js
0
Dharmik soni 11 październik 2020, 11:08

1 odpowiedź

Najlepsza odpowiedź

Przede wszystkim powinieneś konwertować a.ipa_price z powrotem na numer, ponieważ tafixed powrót ciąg.

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

Następnie zmienia się bezpośrednio data obiekt, dlatego zmienia się obiekt data jest prawie zawsze nie zawsze dobrą praktyką. Jednym z lepszych podejść byłoby coś takiego.

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

Możesz także sprawdzić, logując dane bezpośrednio po resolveServices([...data]). Robiąc [...data], robisz płytką kopię. Nie kopiuje samego właściwości obiektu.

0
David Galoyan 11 październik 2020, 09:37