React userSelector 第一次给出 undefined 值

Question

我正在使用 axios 从 api 获取数据，在 api https:/...?vs_currency=${currency}&... 我试图使用 redux 将 currency 值分配给 api。问题是 useSelector 第一次给出了 undefined 值，而我无法从此 api 获取数据。但是 useSelector 工作正常。错误显示为https:/...?vs_currency=undefined&...

这是 redux 代码

import { createSlice } from "@reduxjs/toolkit";

export const currencySlice = createSlice({
  name: "currency",
  initialState: {
    currency: "usd", // first i have currency: null. but then i change it to avoid undefined value, but same result
  },
  reducers: {
    selectCurrencyAndSymbol: (state, action) => {
      state.currency = action.payload;
    },
  },
});

export const { selectCurrencyAndSymbol } = currencySlice.actions;
export const selectcurrency = (state) => state.currency.currency;
export default currencySlice.reducer;

这里是useSelector代码

importing stuff ...

function Carousel() {
  const classes = useStyles();
  const [trending, setTrending] = useState("");
  const currencySelector = useSelector(selectcurrency);

  const fetchTrendingCoins = async () => {
    const data = await axios.get(TrendingCoins(currencySelector?.currency));
    setTrending(data);
  };

  useEffect(() => {
    fetchTrendingCoins();
  }, [currencySelector.currency]);
  
  ...

我也是第一次尝试直接赋值

  
    var currencyValue;
    
   useEffect(() => {
    
      currencyValue = !currencySelector.currency
       ? currencyValue === "pkr"
       : currencyValue === "usd";

    currencyValue = currencySelector?.currency;
    
    fetchTrendingCoins();
    }, [currencyValue]);

这里是useDispatch代码

importing stuff ...

function Header() {
  const [currency, setCurrency] = useState("usd");
  const [symbol, setsymbol] = useState("$");

  const dispatch = useDispatch();

  useEffect(() => {
    if (currency === "pkr") setsymbol("Rs");
    else if (currency === "usd") setsymbol("$");

    dispatch(selectCurrencyAndSymbol({ currency, symbol }));
  }, [currency]);

  ....

Answer 1

您是否使用 redux 开发工具或控制台日志检查了 redux 存储。你能看到货币价值吗？

如果货币可能为空或未定义。你不能在 useEffect 的 fetchTrendingCoins 函数之前放一个 if 语句吗？如果没有货币，则不获取。

Answer 2

//Here you can see that your sending in an 
object {
currency: "usd", 
symbol: "$"
}
selectCurrencyAndSymbol({currency, symbol})

然后在你的 useEffect 中你会遇到你使用 setState 的方式的问题

 useEffect(() => {
    if (currency === "pkr") setsymbol("Rs");
   //else if (currency === "usd") setsymbol("$");
   //here symbol will be $ as the state wouldnt have updated yet by the 
   //time the dispatch is envoked
    dispatch(selectCurrencyAndSymbol({ currency, symbol }));
  }, [currency]);

您的第一个解决方案是将符号添加到您的依赖数组，这将导致 useEffect 在符号更新时为运行

第二种解决方案：

useEffect(() => {
 let symbol = "";
    if (currency === "pkr") symbol = "Rs";
     else if (currency === "usd") symbol = "$"
    dispatch(selectCurrencyAndSymbol({ currency, symbol }));
  }, [currency]);

然后最终在您的商店状态下您拥有

initialState: {
//NOTE: This is not an object at first
    currency: "usd",
  },
reducers: {
selectCurrencyAndSymbol: (state, action) => {
//Here for example the action payload is {currency: "usd", symbol: "$"} 
  state.currency = action.payload;
},

如果您想保留对象方法，您的解决方案是：

initialState: {
        currency: { currency: "usd", symbol: "$" };
      },
    reducers: {
    selectCurrencyAndSymbol: (state, action) => {
      state.currency = action.payload;
    Or
      state.currency.currency = action.payload.currency
      state.currency.symbol = action.payload.symbol
    },

或

initialState: {
             currency: "usd", 
             symbol: "$"
          },
 reducers: {
        selectCurrencyAndSymbol: (state, action) => {
          state.currency = action.payload.currency
          state.symbol = action.payload.currency
        },

但是如果你想保持原样

initialState: {
        currency: "usd"
      },
//Then just send through the currency in your func like this 
selectCurrencyAndSymbol(currency)

请注意，当您使用选择器获取状态时，您访问数据的方式取决于数据的定义方式，例如 //还有一个提醒，最好的做法是在这里使用 cam case selectcurrency 应该是 selectCurrency

export const selectCurrency = (state) => state.currency.currency;

我们如何获取数据可以是 const data = useSelector(selectCurrency) data.currency 如果我们遵循对象方法，则仅数据将起作用

我希望这能给你一些见识

React userSelector 第一次给出 undefined 值

React userSelector gives undefined value for the first time

html

javascript

reactjs

react-redux

axios