Приведите пример Asyn c с useState, который не работает должным образом, в чем проблема? - PullRequest
Новая
       94

Приведите пример Asyn c с useState, который не работает должным образом, в чем проблема?

0 голосов
/ 03 мая 2020

Реакт - это супер новое для меня и изучение некоторых асин c концепций. В настоящее время есть рабочий код, который я закомментировал. Вы можете видеть, что рабочий код принимает useState(0). 0 в качестве значения, в то время как недействующий useState принимает объект, useState({ counter: 0}). Почему он выдает ошибку и выдает [object Object] 1 и NaN, а не число, ожидаемое из чисел? 

import React, { useState } from 'react'

const Async = () => {
    const [currentState, setState] = useState({
        counter: 0
    });

// Can we have prevCounter as an argument? 
// *The two methods below are incorrect!*

const increase = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter + 1
        })
        ), 500
    );
} // will output [object Object]1

const decrease = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter - 1
        })
        ), 500
    )
} // will output NaN

// This portion works fine. Above does not.
/* const [currentState, setState] = useState(0);

const increase = () => {
    setTimeout(
        () => setState(prevCounter => prevCounter + 1)
        , 500
    );
}

const decrease = () => {
    setTimeout(
        () => setState(prevCounter => prevCounter - 1)
        , 500
    );
} */

return(
    <div>
        <h1>{currentState.counter}</h1>  
        {console.log(currentState.counter)}
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
    </div>  
  );
}

export default Async;

1 Ответ

1 голос
/ 03 мая 2020

Необходим правильный доступ к объекту состояния counter свойство currentState.counter, или в этом случае prevCounter.counter, поскольку именно так вы назвали предыдущий объект состояния в обновлении функционального состояния.

prevCounter является объектом, поэтому при применении к нему арифметической операции c результат должен быть NaN, как и ожидалось. 

const increase = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter.counter + 1
        })
        ), 500
    );
} // will output [object Object]1

const decrease = () => {
    setTimeout(
        () => setState((prevCounter) => ({
            counter: prevCounter.counter - 1
        })
        ), 500
    )
}
...