function 未根據更新的 state 值返回更新的數據

Question

我正在創建一個加密反應應用程序，只是想弄清楚當我更新 state 值之一時 function 返回一個空數組。 我認為這是一個比賽條件。 它一直有效，直到發生 state 更改。 請在下面查看我的代碼：

所以我有一個 state object。 默認情況下，它會根據 selectedCurrencyState.selectedFromCurrency 值返回一組貨幣，該值是 state 值。 這個function基本上需要在返回包含baseCurrencies數組的object之前確定quoteAsset。 swapInfo是包含模擬數據的 state 值。 模擬數據嵌套如下：

const getBaseCurrencies = () => {
  const filteredQuoteAssetObj = selectedCurrencyState.selectedFromCurrency
    && swapInfo.find(item =>
      item.quoteAsset === selectedCurrencyState.selectedFromCurrency);
  const currencies = filteredQuoteAssetObj
    && filteredQuoteAssetObj.baseAssets.map(item => item.baseAsset);
  return currencies;
}

這是我正在使用的模擬數據：

就像我說的那樣，它一直有效，直到selectedCurrencyState.selectedFromCurrency的 state 更改（將 state 從 USD 切換到 SHIB）。 之后，它返回一個空數組。 默認情況下，我將 state 設置為 USD 作為selectedFromCurrency 。

任何幫助或輸入表示贊賞。 多謝你們！

--更新--順便說一下，這是我更新 state 的方式。 因此，我正在使用功能組件，使用 useState。

  const [swapInfo, setSwapInfo] = useState([]);
  const [fromCurrencies, setFromCurrencies] = useState([]);
  const [selectedCurrencyState, setSelectedCurrencyState] = useState({ selectedToCurrency: null, selectedFromCurrency: null });
const [transactionType, setTransactionType] = useState(TRANSACTION_TYPES.BUY);

  useEffect(() => {
    getSwapPairs()
      .then((res) => {
        setSwapInfo(res.data);
        setFromCurrencies(res.data.map(item => item.quoteAsset));

if (transactionType === 'BUY') {
          setSelectedCurrencyState({ ...selectedCurrencyState, selectedFromCurrency: localStorage.getItem('fromCurrency') || 'USD', selectedToCurrency: symbol || localStorage.getItem('toCurrency') });
        }
        setTransactionType(localStorage.getItem('transactionType', transactionType) || TRANSACTION_TYPES.BUY);
  }, []);


  const handleInvertSelectedAssets = (fromCurrency, toCurrency) => {
    setSelectedCurrencyState({ ...selectedCurrencyState, selectedFromCurrency: toCurrency, selectedToCurrency: fromCurrency });
    localStorage.setItem('toCurrency', fromCurrency);
    localStorage.setItem('fromCurrency', toCurrency);
  };

這是我切換事務類型的地方：

  const handleTransactionTypeChange = (type) => {
    if (transactionType !== type) {
      setTransactionType(type);
      handleInvertSelectedAssets(selectedCurrencyState.selectedFromCurrency, selectedCurrencyState.selectedToCurrency);
      localStorage.setItem('transactionType', type);
      setAmountState({ toCurrencyAmount: '', fromCurrencyAmount: '' });

    }
  };

Answer 1

感覺您的問題在於您更新 state 的方式。 也許更新的selectedCurrencyState.selectedFromCurrency有錯字，或者swapInfo以某種無效的方式更新？

您能否填寫有關如何管理 state 的更多信息？

Answer 2

在 React 中更新 state 時，

以下不應該做

this.state = {a:"red", b:"blue"};

if( this.state.b == "blue" ) {
    this.setState({a: "green" });
} 

相反，做

this.setState((prevState)=>(
    {a: (prevState.b=="blue")? "green": "red" }
));

換句話說，state 更新依賴於其先前的值，應該使用setState的回調參數。

例如： selectedCurrencyState取決於transactionType 。

您可以將兩者（或所有 state 屬性）存儲為單個 object 。