Поэтому я пытаюсь перечислить элементы из API. Я действительно не понимаю, что не так с моим кодом здесь. Я продолжаю получать ошибки.

Дело в том, что state.product корректно обновляется данными API.

Вот ошибка, которую я получаю:

this.state.product.map не является функцией

Может кто-нибудь, пожалуйста, будьте любезны помочь мне здесь here

import React, { Component } from 'react';
import { getTranslate, getActiveLanguage } from 'react-localize-redux';
import { connect } from 'react-redux';

// Api Services
import Product from '../../api/product';

class ListProducts extends Component {
    constructor() {
        super();
        this.state = {
            deleteProductModalIsOpen: false,
            products: []
        };
    }

    componentDidMount() {
        let __this = this;

        Product.getAll(function(res) {

            __this.setState({ products: res });
        });
     }

    render() {
        const products = this.state.products.map((item) => ([
            <div className="photo-container" style={{ backgroundImage: 'url("/img/samples/photo.png")' }}></div>,
            item.reference_provider,
            item.label,
            <BarCode img="/img/samples/bar-code.png" code={item.code}/>,
            <Input type="select-table" placeholder={this.props.translate('generic.type')} options={[
                { value: '1', label: <div><div className="dot danger"/> &nbsp; Rupture</div> },
                { value: '2', label: <div><div className="dot warning"/> &nbsp; À commander</div> },
                { value: '3', label: <div><div className="dot info"/>&nbsp; Pris en compte</div> },
                { value: '4', label: <div><div className="dot success"/> &nbsp; En stock</div> }
            ]}/>,
            item.rellacotionproducts.length,
            <div className="action-buttons">
                <a href="/list-products-activity#AdjustStocksModal">
                    <div className="tooltip">
                        <Button type={"table-action"} action={"less-gray"}/>
                        <div className="tooltip-text">{this.props.translate('Button.less')}</div>
                    </div>
                </a>
                <a href="/list-products-activity#AdjustStocksModal">
                    <div className="tooltip">
                        <Button type={"table-action"} action={"plus-gray"}/>
                        <div className="tooltip-text">{this.props.translate('Button.plus')}</div>
                    </div>
                </a>
                <a href={"/edit-product/" + item.id }>
                    <div className="tooltip">
                        <Button type={"table-action"} action={"edit"}/>
                        <div className="tooltip-text">{this.props.translate('Button.edit')}</div>
                    </div>
                </a>
                <div className="tooltip">
                    <Button onClicked={this.openDeleteProductModal.bind(this)} type={"table-action"} action={"delete"}/>
                    <div className="tooltip-text">{this.props.translate('Button.delete')}</div>
                </div>
            </div>
        ]));


        return (
            <div className="list-products">
                <Page/>
                <div className="page-container">
                    <div className="page-header">
                        <h1><img src="/img/list-products-header-icon.png"/> &nbsp;{this.props.translate('ListProducts.title')}</h1>
                        <div className="action-buttons">
                            <Input type="search" label={this.props.translate('generic.search')}/>
                            <Button type={"action"} action="export" label={this.props.translate('Button.export')}/>
                            <Button type={"action"} action="create" label={this.props.translate('Button.fast_create')}/>
                            <Button type={"action"} action="print" label={this.props.translate('Button.print')}/>
                        </div>
                    </div>
                    <div className="page-main">
                        <Table
                            pagination={true}
                            rowsPerPage="8"
                            head={[
                                <div>{this.props.translate('generic.photo')} &nbsp; </div>,
                                <Input type="search-th" label={this.props.translate('ListProducts.reference')}/>,
                                <Input type="search-th" label={this.props.translate('generic.tag')}/>,
                                <Input type="search-th" label={this.props.translate('ListProducts.barcode')}/>,
                                <div>{this.props.translate('generic.type')} &nbsp;<img src="/img/table-header-order-arrow.png"/></div>,
                                <div>{this.props.translate('ListProducts.quantity_stock')} &nbsp;<img src="/img/table-header-order-arrow.png"/> &nbsp; &nbsp; </div>,
                                this.props.translate('ListProducts.action')
                            ]}
                            body={
                                products
                            }/>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    translate: getTranslate(state.locale),
    currentLanguage: getActiveLanguage(state.locale).code
});

export default connect(mapStateToProps)(ListProducts);

Также это ответ от сервера API:

"products": [
    {
        "id": 53,
        "productoreqpt": true,
        "reference_company": null,
        "label": null,
        "type": null,
        "description": null,
        "code": null,
        "code_gentype": null,
        "category": [],
        "tags": [],
        "size": null,
        "color": null,
        "reference_provider": null,
        "statut": null,
        "dimlenght": null,
        "dimwidth": null,
        "dimtall": null,
        "weight": null,
        "unit": null,
        "perishable_duration": null,
        "dangerous": null,
        "maker": null,
        "gps": null,
        "supplier": null,
        "variation": null,
        "variation_mother": null,
        "variation_carac": null,
        "internal_code": null,
        "archive": null,
        "created": "2018-03-02T16:18:20+0000",
        "modified": "2018-03-02T16:18:20+0000",
        "company_id": 0,
        "env_id": 0,
        "user_num_1": null,
        "user_num_2": null,
        "user_num_3": null,
        "user_num_4": null,
        "user_num_5": null,
        "user_date_1": null,
        "user_date_2": null,
        "user_date_3": null,
        "user_date_4": null,
        "user_date_5": null,
        "user_text_1": null,
        "user_text_2": null,
        "user_text_3": null,
        "user_text_4": null,
        "user_text_5": null,
        "user_boo_1": null,
        "user_boo_2": null,
        "user_boo_3": null,
        "user_boo_4": null,
        "user_boo_5": null
    }

Хорошо, так что довольно обновить. Похоже, что продукты представляют собой массив, но сразу переходят к неопределенному. Вот консольный журнал введите описание изображения здесь

0
Emmanuel Scarabin 3 Мар 2018 в 01:26

3 ответа

Лучший ответ

Просто поставьте условие над res, если оно на самом деле не определено

Product.getAll(function(res) {

        __this.setState({ products: (res || __this.state.products) });
    });

Надеюсь, это поможет.

1
Clean code 5 Мар 2018 в 09:43

Является ли res массивом. карта работает только для массивов. Используйте console.log(res), чтобы проверить, является ли это массивом. Если не преобразовать его в массив

1
Marvin 2 Мар 2018 в 22:56

Проблема в __this.setState({ products: res }); По сути, вы получаете эту ошибку, потому что res не относится к типу массива, поэтому вы должны проверить его и убедиться, что это тип массива, как уже упоминали другие.

Если вы все еще получаете ту же ошибку, я предлагаю вам console.log res и добавьте ее к вашему вопросу.


1
Javascriptonian 3 Мар 2018 в 21:31