Ustawienie jako stan wartości wyrażenia - react.

Question

Cześć mam pytanie jak przypisać wartość po przemnożeniu do stanu..

class App extends Component {
  constructor(props) {
    super(props);

  // const [amount, setAmount] = useState(0);
  // const [currency, setCurrency] = useState("EUR");
  // const [rates, setRates] = useState({EUR:0,USD:0,CHF:0})
  this.state = {
    rates: {
      EUR: 0,
      USD: 0,
      CHF: 0,
    },
amount: 0,
currency: "",
exchangeAmount: 0,
}

 

Tutaj tworzę stan po czym przypisuje do nich wartości z API w funkcji componentDidMount

exchangeAmountFn = () => {
    this.setState({ exchangeAmount: })
{
 

tu chcę napisać funkcję, która obliczy wartość złotego po kursie i chciałem to zrobić w postaci "rates[currency] * amount", lecz nie działa.

Z góry dziękuję za pomoc.

Answer 1

Jeśli próbowałeś obliczać stan za pomocą hooke'ów, to ich można używać tylko w komponencie funkcyjnym, a w powyższym kodzie korzystasz z komponentu klasowego. Kompilator Reacta powinien rzucić błędem - jeśli tego nie robi, to zainstaluj sobie ESLint z pluginem do Reacta; albo React w przeglądarce powinien rzucić warningiem o nieprawidłowym użyciu hooków.

Przy wyliczaniu stanu weź też pod uwagę, że React robi to asynchronicznie, więc może Ci się przydać funkcyjne aktualizowanie stanu.

---

Jeśli to nie jest przyczyną problemu, to napisz co konkretnie nie działa.

Comments

Jak próbuje obliczyć to za pomocą "rates[currency] * amount" to wywala błąd, pytanie jak to zapisać w komponencie.

---

Jaki błąd? Jak konkretnie próbowałeś to zapisać? W ten sposób:

this.setState({ exchangeAmount: rates[currency] * amount })

, to na oko nie zadziała, ponieważ zmienne rates, currency i amount próbujesz odczytać lokalnie, a one są dostępne w obiekcie stanu. Bardziej w ten sposób:

this.setState({ exchangeAmount: this.state.rates[this.state.currency] * this.state.amount })

 

---

Dzięki wielkie, działa :D

---

Mam jeszcze pytanie, apropo tej asynchroniczności. Bo teraz gdy klikam w button to najpierw dostaje NaN, dopiero gdy za drugim razem kliknę to dostaję wartość po przeliczeniu. Czy to poprostu kwestia wywołania tego fetcha szybciej?

---

Dobra, jednak problem leżał w czymś innym :D