我的应用程序中正在使用未使用的mapStateToProps

Question

我是本机反应者，正在开发一个应用程序，以便在我的6张卡显示器之一内的按钮上单击以在文本区域中显示json数据。我正在调用的api是API_PREFIX_V2 +'/ skmanifestvalidation？regionAd ='+ this。 props.regionAd +'＆regionplanId = 21'会提供数据

{
    "overage": {
        "x7.service-gateway-56": {
            "sgw-dp-hosts": 4, 
            "elpaso-platform": 8
        }, 
        "x7.enclave0-104": {
            "pki-crossregion-root": 1, 
            "pki-root": 1, 
            "casper-work-request-service": 2, 
            "bastion": 2, 
            "casper-bm-web-server": 10, 
            "flamingo-load-balancer": 12, 
            "dhcp": 3
        }, 
        "x7.mlio02-40": {
            "mlio-utility-x7": 30
        }, 
        "x7.enclave1-104": {
            "pki-crossregion-root": 1, 
            "pki-root": 1, 
            "hops-canary": 1, 
            "casper-work-request-service": 2, 
            "bastion": 2, 
            "dns-vcn-master": 3, 
            "casper-bm-web-server": 10, 
            "casper-bm-verifier": 1, 
            "dhcp": 3, 
            "bare-metal-stats": 3, 
            "rqs-es-data": 2
        }, 
        "x7.enclave2-104": {
            "pki-crossregion-root": 1, 
            "iod-db": 2, 
            "pki-root": 1, 
            "casper-work-request-service": 2, 
            "iod-db-restore": 1, 
            "secret-management-ce-dp": 3, 
            "iod-db-kiev": 2, 
            "hydra-ibex-indexer": 100, 
            "iod-db-casper": 2, 
            "iod-db-telemetry": 2, 
            "hydra-ibex-historical": 5, 
            "casper-bm-verifier": 1, 
            "net-monitoring-prometheus": 2, 
            "casper-bm-web-server": 10, 
            "bare-metal-stats": 3, 
            "secret-management-se-dp": 3, 
            "rqs-es-data": 2
        }, 
        "x7.casper1-40": {
            "casper-storage": 54
        }, 
        "x7.storage1-40": {
            "ntp": 2, 
            "hydra-mq": 4, 
            "hydra-ibex-historical": 5, 
            "iod-backup": 2
        }, 
        "x7.kms01": {
            "kms-hsm-bm-instance": 6
        }, 
        "x7.blockstore01-56": {
            "bsv2": 2000
        }
    }, 
    "shape_count": {
        "x7.service-gateway-56": {
            "sk_rack_data": 0, 
            "physical_capacity": 12
        }, 
        "x7.enclave0-104": {
            "sk_rack_data": 16, 
            "physical_capacity": 34
        }, 
        "x7.mlio02-40": {
            "sk_rack_data": 0, 
            "physical_capacity": 30
        }, 
        "x7.enclave1-104": {
            "sk_rack_data": 1, 
            "physical_capacity": 58
        }, 
        "x7.enclave2-104": {
            "sk_rack_data": 16, 
            "physical_capacity": 122
        }, 
        "x7.casper1-40": {
            "sk_rack_data": 0, 
            "physical_capacity": 54
        }, 
        "x7.storage1-40": {
            "sk_rack_data": 0, 
            "physical_capacity": 8
        }, 
        "x7.kms01-104": {
            "sk_rack_data": 0, 
            "physical_capacity": 6
        }, 
        "x7.blockstore01-56": {
            "sk_rack_data": 27, 
            "physical_capacity": 2000
        }
    }
}

我有一个名为statuscard.js的文件，其代码如下：

import React, {Component} from 'react';
import Shapes from './Shapes';
import { API_PREFIX_V2} from '../../constants/config';
import PropTypes from "prop-types";

class StatusHelper extends Component {
    constructor() {
        super();

        this.state = {
            SHAPES: []
        };
    }
    componentDidMount() {
        fetch(API_PREFIX_V2 + '/skmanifestvalidation?regionAd=' + this.props.regionAd+'&regionplanId=21')
            .then(res => res.json())
            .then((data) => {
                this.setState({SHAPES: data})
            })
            .catch(console.log)
    }
    render () {
        return (
            <Shapes SHAPES={this.state.SHAPES} />
        );
    }
}


StatusHelper.propTypes = {

    regionAd: PropTypes.string.isRequired,

};

const mapStateToProps = (state) => {
    return {

        regionAd: state.region.selected
    };

};
export default StatusHelper;

我收到错误信息'mapStateToProps'，但未使用no-unused-vars。每当选择其他区域时，regionAd都会更改。任何建议如何解决这个问题？非常感谢！！解决了。它会调用具有代码的status.js文件

import React from 'react'
import PropTypes from "prop-types";

const Shapes = ({ SHAPES }) => {
    return (
        <div style={{text_align: 'center'}}>
            <h1>Shapes List</h1>
            {SHAPES.map((SHAPES, index) => (
                <div className="card" key={index}>
                    <div className="card-body">
                        <p className="card-text">{SHAPES.overage}</p>
                        <p className="card-text">{SHAPES.shape_count}</p>

                    </div>
                </div>
            ))}
        </div>
    )
};


Shapes.propTypes = {
    SHAPES: PropTypes.arrayOf(PropTypes.shape({
        overage: PropTypes.array,
        shape_count: PropTypes.array,

    }))
};
export default Shapes

这里给我抛出错误：TypeError：t.map不是函数。我想在文本区域中显示数据。您能否帮助我解决错误以及如何在textarea中显示api数据？

Answer 1

首先，您需要安装react-redux库，然后