Question

我刚开始使用reacts / redux并试图了解商店/州。我构建了一个成功接收数据的组件，然后将其传递给reducer。这是我的组成部分：

'use strict';

var React = require('react');
var PropTypes = React.PropTypes;

import axios from 'axios';
import store from '../../store';
import {getDataSuccess, getDataFail} from '../../actions/userData-actions'
import {connect} from 'react-redux';

class ServiceDetails extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            tabs: null,
            tabContent: null
        }
    }

    componentDidMount() {
        axios.get('http://localhost:3001/0')
            .then(response => {
                console.log('getservicedetails=response.data', response.data);
                store.dispatch(getDataSuccess(response.data));
                return response;
            })
            .catch(function (error) {
                console.log(error);
                store.dispatch(getDataFail(error));
            });

    }

    render() {
        return (
            <section className="ServiceDetails">
                <h1>id:{props.userData.users[0].id}</h1>
                service details new
            </section>
        )
    }
}


const mapStateToProps = function (store) {
    console.log('Servicedetails mapStatetoprops =',store );
    return {
        data: store.datas,
        userData: store.apiData
    };
};

export default connect(mapStateToProps)(ServiceDetails);

mapstatetoProps函数接收数据但是如何呈现此数据？如何显示商店中的数据？

Answer 1

我在代码中看不到reducer。你的功能

const mapStateToProps = function (store) {
  return {
    data: store.data,
    userData: store.apiData
  };
};

将新状态映射到道具，＆amp;这将重新渲染您的组件。结果是您的组件将使用新的/更新的数据进行更新。

另外请验证并修复这些内容：

您应该在渲染函数中使用this.props.userData而不是props.userData。
使用Provider，以便在所有组件中使用商店。

另外一件事，mapStateToProps函数中的拼写错误[“datas”]。单个数据单元称为数据和数据。多个数据称为数据而非数据。

Answer 2

我发现它，我在渲染之前检查数组长度是否大于0.

如何在redux中显示商店中的数据？

2 个答案: