为什么使用 redux 状态还是显示 Promise？我应该如何访问结果中的数组？

Question

当我控制台记录结果时，这里的状态显示了一个承诺。我如何访问我尝试 Object.key 和映射但没有任何效果的承诺结果中的数组

> import React, { useEffect, useState } from 'react'; import {
> useDispatch, useSelector } from 'react-redux'; import { fetchStocks }
> from '../Redux/stocks/stockreducer';
> 
> 
> 
> export const Home = () => {
> 
> const dispatch = useDispatch(); useEffect(() =>
> dispatch(fetchStocks),[dispatch]); let result = useSelector((state) =>
> state.stocks); console.log(result)   return (
> 
>     <div>
>      <h1>test</h1>
>     </div>   ); }

这是我使用 axios 从 API 获取数据的地方，我认为通过使用 then 我可以访问 Promise 对象中的数组，但我不能

> import Axios from 'axios';
> 
> const initialState = [];
> 
> export const LOAD_STOCKS = 'GET_STOCKS';
> 
> export const loadAllStocks = (payload) => ({
>     type: LOAD_STOCKS,
>     payload,   });
> 
> export const fetchStocks = (dispatch) => {
>     var options = {
>       method: 'GET',
>       url: 'https://coinranking1.p.rapidapi.com/coins',
>       params: {
>         referenceCurrencyUuid: 'yhjMzLPhuIDl',
>         timePeriod: '24h',
>         tiers: '1',
>         orderBy: 'marketCap',
>         orderDirection: 'desc',
>         limit: '50',
>         offset: '0',
>       },
>       headers: {
>         'x-rapidapi-host': 'coinranking1.p.rapidapi.com',
>         'x-rapidapi-key': '03518c50f0mshb2f93a5c3fbb56fp1a5e6ajsn175d3c928506',
>       },
>     };
>     let result = Axios.request(options).then((response) => response.data).then((result) => result.data.coins);
>     dispatch(loadAllStocks(result))
>     return result
>          };
>  
> 
> 
> const Stocksreducer = (state = initialState, action) => {
>     switch (action.type) {
>       case LOAD_STOCKS:
>         return action.payload
>       default:
>         return state;
>     }   };
> 
>   export default Stocksreducer;

Answer 1

您已将 fetchStocks 声明为同步函数，因此您从 axios 请求调度 return Promise 对象，而不是解析值。

要么从 Promise 链中分派结果值：

export const fetchStocks = (dispatch) => {
  const options = {
    ...
  };
  Axios.request(options)
    .then((response) => response.data)
    .then((result) => {
      dispatch(loadAllStocks(result.data.coins));
    })
    .catch(error => {
      // handle any rejected Promises or errors
    });
};

或将 fetchStocks 转换为 async 函数和 await 要解析的 Promise。

export const fetchStocks = async (dispatch) => {
  const options = {
    ...
  };

  try {
    const response = await Axios.request(options);
    const result = response.data;
    dispatch(loadAllStocks(result.data.coins));
  } catch(error) {
    // handle any rejected Promises or errors
  }
};

为什么使用 redux 状态还是显示 Promise？我应该如何访问结果中的数组？

Why the state is still showing Promise while using redux? and how should I access the array inside the result?

javascript

reactjs

redux

promise

reactstrap