如何在 React 中提取狀態的值 (How to extract value of a state in React)

問題描述

如何在 React 中提取狀態的值 (How to extract value of a state in React)

在我的 App.jsx 中使用多個狀態變量時，我想將一個狀態的值設置為等於另一個狀態的值。

const [exchangeRatio, setExchangeRatio] = useState();
const [toCurValue, setToCurValue] = useState();

function foo()
{
   setToCurValue(exchangeRatio);
}

在 console.log(exchangeRatio );

{exchangeRatio: undefined}
exchangeRatio: undefined
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

進一步

console.log({exchangeRatio}.valueOf());
>>Undefined

如果有辦法做同樣的事情，我是React的新手，請隨意寫。

參考解法

方法 1:

const [exchangeRatio, setExchangeRatio] = useState();
const [toCurValue, setToCurValue] = useState();

The above statement denotes that you are declaring a state with values stored in exchangeRatio and toCurValue respectively and those states can be modified only using setExchangeRatio and setToCurValue methods respectively.

While you declare a state using useState(), you are expected to specify the initial value of the state inside the useState() as a parameter. For eg. if you want the initial value of exchangeRatio to be 10, then you must write it as ‑

const [exchangeRatio, setExchangeRatio] = useState(10);

Now, since you haven't provided an initial state value, you are getting the console logged output as undefined. Once, you properly initialize it with the proper value, you can directly use the state and the stored value will be returned to you.

So, suppose you want to set toCurValue's value to be equal to exchangeRatio's value (which has been initialised properly), then you can either do it while writing useState() or using the setToCurValue in following ways ‑

const [toCurValue, setToCurValue] = useState(exchangeRatio);

OR

setToCurValue(exchangeRatio);

(by nutNCracker、Abhishek Bhagate)

參考文件

1. How to extract value of a state in React (CC BY‑SA 2.5/3.0/4.0)