时间戳

首页 > 解决方案 > reactjs如何动态显示数据？

reactjs - reactjs如何动态显示数据？

问题描述

我试图从 API 获取数据，它工作正常，但是当没有数据或一个数据不同时，当有 2 个或更高数据时。我试图使用map方法但有一个未定义的错误。我需要以三种方式显示来自 API 的数据：

  1. 没有数据显示时
  2. 当有一个不存在数组的数据时
  3. 什么时候有数组

这是我的代码：

class ForsatView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    id: this.props.auth.FormInfoList.FormInfo.CrmId,
                    name: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[2],
                    repairsReport: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[4],
                    serialNumber: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[8],
                    model: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[17],
                    face: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[7],
                    situation: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[1],
                    fistly: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[0],
                    transport: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[16],
                    reciveDate: this.props.auth.FormInfoList.FormInfo.ExtendedProperties.BaseCrmObjectExtendedPropertyInfo[15],
                },
            ],

        }
    }
    componentDidMount() {
        store.dispatch(allForsat())
    }
    static propTypes = {
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired,
    }
    render() {

        return (
            <Container>
                <div className="panel-content">

                    {this.state ? <div className="mt-5">No service</div>
                        :
                        <div className="mt-4 tab-profile-collaps text-right">
                            {this.state.data.map((details, index) =>
                                <Collapsible key={index}
                                    trigger={details.name.Value}>
                                    <div className="row">
                                        <div className={"col-lg-6 col-12"}>
                                            <div className="forsat-detial-wrapper">
                                                <div className={"title-tech-advice"}>
                                                    <h5>
                                                        Report
                                                    </h5>
                                                    <p>
                                                        {details.name.Value}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={"col-lg-6 col-12"}>
                                            <div className="forsat-detial-wrapper">
                                                <div className="forsat-detial-wrapper-boxes">
                                                    <p>Date</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Nameر</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">SerialNymber</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Model</p><span
                                                        className="d-flex">{details.name.Value}</span>
                                                    <p className="mt-3">Details</p><span
                                                        className="d-flex">{details.name.Value}</span>

                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </Collapsible>
                            )}

                        </div>
                    }

                </div>
            </Container>
        );
    }
}
export default withRouter(ForsatView)

标签： reactjs

解决方案

好吧，首先我建议你清理一下你的组件并将它分成多个，以避免它中间出现金字塔，只是为了让其他人更容易阅读和理解。

现在，关于您的问题，您可以将获取的数据发送到另一个组件并让它像这样处理它：如果为空返回一个<p>带有字符串的标签以显示没有数据或更合适的其他东西，如果里面的数组为空，请再次执行类似的操作，并且如果真实且可呈现的数据仅返回填充了数据的组件。

处理组件的示例：

const stuffToPrint = ({apiData}) => {
    return (apiData) ? 
    <p>No data</p>
    :
    (apiData.array) ?
        <p>array empty</p> 
        :
        <informativeComponent data={apiData.array}/>
        ;
    ;
}

推荐阅读