如何在 React Redux 中为 promise.all 操作设置加载器？

Question

因此，当我检查 Redux dev-tools 时，我看到我收到了我的数据并且它们是状态的一部分，但是当我尝试使用条件渲染时，它不会渲染页面并给出错误 TypeError: Cannot read property 'Global Quote ' 未定义！

如果我只使用 this.props.data.TSLA 它工作正常并且页面呈现......

当我使用 this.props.data.TSLA["Global Quote"]["01.symbol"] 页面不会呈现！（键是 JSON 中的字符串，所以我需要使用方括号）。

我也在使用 Redux-Thunk ！

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import { START_FETCH_DATA } from './redux/dataReducer';

class Fetcher extends Component {

componentDidMount() {

    this.props.START_FETCH_DATA()

}

render() {

const { data, dataLoading } = this.props;

    return (

    <li className="tesla-container">

    { this.props.dataLoading ? 

    (<div className="ticker"> Loading! </div>) 

    : 

    (<div className="ticker">{ 

    this.props.data.TSLA["Global Quote"]["01. symbol"] }</div>) }

    </li>

    )

}

const mapStateToProps = (state) => {

    return {

        data: state.data,

        dataLoading: state.dataLoading

    }

}

const mapDispatchToProps = (dispatch) => {

    return {

        START_FETCH_DATA: bindActionCreators(START_FETCH_DATA, dispatch)

    }

}

export default connect(mapStateToProps, mapDispatchToProps)(Fetcher)

这是减速器+动作......

export const dataReducer = (state = {dataLoading: true}, action) => {

switch(action.type) {

    case "START_FETCH_DATA":

        return {...state, dataLoading: true}

    case "FINISH_FETCH_DATA":

        return {...state, dataLoading: false, data: action.payload}

    default:

        return state;

}};

export const START_FETCH_DATA = () => {

return (dispatch) => {

    Promise.all(

        [

        fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=TSLA&apikey=LOL`).then(data => data.json()),

        fetch(`https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=AMZN&apikey=LOL`).then(data => data.json())

        ]

    )

    .then(([TSLA, AMZN]) => {

        dispatch({ type: "FINISH_FETCH_DATA", payload: {TSLA, AMZN} })

    })

}};

Answer 1

我解决了我的问题。固定代码如下：`const mapStateToProps = (state) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; dataLoading: state.dataReducer.dataLoading,&nbsp; &nbsp; &nbsp; &nbsp; data: state.dataReducer.data&nbsp; &nbsp; }}`代替`const mapStateToProps = (state) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; dataLoading: state.dataLoading,&nbsp; &nbsp; &nbsp; &nbsp; data: state.data&nbsp; &nbsp; }}`

Answer 2

对于初学者，您应该使用reduxin提供的数据render()：import { connect } from 'react-redux';import { bindActionCreators } from 'redux';import { START_FETCH_DATA, dataReducer } from './redux/dataReducer';class Fetcher extends Component {componentDidMount() {&nbsp; &nbsp; this.props.START_FETCH_DATA()}render() {&nbsp; &nbsp; return (&nbsp; &nbsp; <li className="tesla-container">&nbsp; &nbsp; { this.props.dataLoading ?&nbsp;&nbsp; &nbsp; (<div className="ticker"> Loading! </div>)&nbsp;&nbsp; &nbsp; :&nbsp;&nbsp; &nbsp; (<div className="ticker">{&nbsp;&nbsp; &nbsp; this.props.data.TSLA["Global Quote"]["01. symbol"] }</div>) }&nbsp; &nbsp; </li>&nbsp; &nbsp; )}const mapStateToProps = (state) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; data: state.data,&nbsp; &nbsp; &nbsp; &nbsp; dataLoading: state.dataLoading&nbsp; &nbsp; }}const mapDispatchToProps = (dispatch) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; START_FETCH_DATA: bindActionCreators(START_FETCH_DATA, dispatch)&nbsp; &nbsp; }}export default connect(mapStateToProps, mapDispatchToProps)(Fetcher)