Question

因此，当我检查Redux开发工具时，我看到我已经收到了数据并且它们是状态的一部分，但是当我尝试使用条件渲染时，它将无法渲染页面并给出错误TypeError：无法读取属性'全球报价'未定义！

如果我只使用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)

这是reducer +动作...

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} })
    })
}};

DEVOLOLS SCREENSHOT https://imgur.com/a/2Tcrdpe

Answer 1

对于初学者，您应该使用redux中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)

Answer 2

我已解决问题。

下面的固定代码：

`const mapStateToProps = (state) => {
    return {
        dataLoading: state.dataReducer.dataLoading,
        data: state.dataReducer.data
    }
}`

代替

`const mapStateToProps = (state) => {
    return {
        dataLoading: state.dataLoading,
        data: state.data
    }
}`

如何在React Redux中将loader设置为promise.all操作？

2 个答案: