Question

我定义了这个状态：

 constructor(props){
        super(props);

        this.state = {
            open: false,
            customers:[],
            customer:{},
            products:[],
            product:{},
            orders:[],
            order:{},
            newForm:true,
            phoneNumbererror:null,
            shop:this.props.salon,
            value:'a',
            showTab:'none',
            slideIndex: 0,

        };
    }

使用包含fetch的以下函数，我收到一个带有responseData的对象数组。

getHistory(){
        console.log("Log antes del fetch de customer id");
        console.log(this.state.customer._id);
        fetch(
            DOMAIN+'/api/orders/customer/'+this.state.customer._id, {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {
                return response.json();
            })
            .then((responseData) => {
                this.setState({orders:responseData})
                console.log("Log del responseData");
                console.log(responseData);

            })
            .catch(function() {
                console.log("error");
            });
    }

在handleCellClick中调用此函数，我在其中传递来自使用者的一些数据，例如ID：

handleCellClick(y,x,row){
        this.setState({
            open:true,
            slideIndex: 0,
            newForm:false,
            customer:{...row}
        });
        this.getProfiles();
        this.getHistory();

    }

从获取中获取的JSON对象并将其保留在this.state.orders中，如下所示：

(29) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
created:"2017-07-06T15:58:07.958Z"
customer:"59561f3f1d178e1966142ad7"
lastModified:"2017-07-06T15:58:07.958Z"
orderList:[]
orderStatusChange:Array(1)
0:{status: "5", comments: "Creado en back antes de pagar", _id: "595e5e0f60fbf65149916b7c", created: "2017-07-06T15:58:07.958Z"}
length:1
__proto__:Array(0)
shop:"59108159bc3fc645704ba508"
totalAmount:4000
__v:0
_id:"595e5e0f60fbf65149916b7b"
__proto__:Object

捕获对象以便更好地理解：CAPTURE

如前面提到的那样，使用此行this.setState({orders:responseData})，我可以将orders传递到我希望显示ID，日期和状态的表格：

<DataTables
     height={'auto'}
     selectable={false}
     showRowHover={true}
     columns={HISTORY_TABLE_COLUMNS}
     data={this.state.orders}
     showCheckboxes={false}
     rowSizeLabel="Filas por página"
         />

名为：

const HISTORY_TABLE_COLUMNS = [
    {
        key: '_id',
        label: 'Número de pedido'
    }, {
        key: 'created',
        label: 'Fecha del pedido'
    }, {
        key: 'status',
        label: 'Estado'
    }
];

问题来了，当我想要打印_id，created和status时，前两个值打印没有任何问题，但status位于数组orderStatusChange，我无法打印出来。

CAPTURE OF THE CURRENT SITUATION

如何访问status将其打印在桌面上？

Answer 1

根据DOC：

<强> Column settings:

key         :  string       
label       :  string       
sortable    :  bool     
tooltip     :  string       
className   :  string       
render      :  function       //here
alignRight  :  bool     
style       :  object

有一个列属性render，它是一个函数，用它来返回一些自定义元素，如下所示：

const HISTORY_TABLE_COLUMNS = [
    {
        ....
    }, {
        ....
    }, {
        key: 'orderStatusChange',
        label: 'Estado'
        render: (staorderStatusChangetus, all) => {
            /*
               check the console values  
               i am expecting all will have the each object of the array, and 
               orderStatusChange will have that orderStatusChange array
               so you can return the result of:
               orderStatusChange.map(el => <p>{el.status}</p>)
            */ 
            console.log('value', status, all);
            return orderStatusChange.map(el => <p>{el.status}</p>)
        }
    }
];

注意：不确定值，请检查控制台输出并返回所需的结果。

Answer 2

如果您在DataTable中找到某些选项/道具以显示您正在尝试的内容，请使用该选项/道具。

这可能听起来是实现你正在努力的原始方式。但这应该有效。请在下面更新承诺回电。

.then((responseData) => {
    let orders = responseData.map((order) => {
       return order.orderStatusChange ? Object.assign({}, order, {
         status: order.orderStatusChange[0].status
       }) : order;
     })
    this.setState({orders:orders})
})

在上面的代码段中，我正在检查订单是否包含密钥＆quot; orderStatusChange＆＃39;它将从第一个记录获取状态并返回一个具有状态的新对象，否则它将返回原始订单对象。

无法从Reactjs中

2 个答案: