如何在 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) => {

    return {

        dataLoading: state.dataReducer.dataLoading,

        data: state.dataReducer.data

    }

}`

代替

`const mapStateToProps = (state) => {

    return {

        dataLoading: state.dataLoading,

        data: state.data

    }

}`

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() {

    this.props.START_FETCH_DATA()

}

render() {

    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)