TypeError:使用API​​的数据加载listview时,请求的键值不是对象。仅在发行版上

时间:2018-08-21 07:22:00

标签: listview react-native

我在这个错误中挣扎,我在哪里找不到它。我收到TypeError:请求的键值不是对象。但我不确定是什么原因,因为它仅出现在发行版本中(如果我使用仿真器或连接到笔记本电脑的设备,这不是错误)

我发现它碰巧出现在listview元素上,该listview从API根据预先选择的ID从API加载数据,这里是listview的代码:

TransactionItemList.js

class TransactionItemList extends Component {

componentWillMount() {
    this.props.getTransactionItems(this.props.transaction.id);
}

renderRow(transaction_item) {
    return <TransactionItemListItem item={transaction_item} />
}
renderReadonlyRow(transaction_item) {
    return <TransactionItemListItem item={transaction_item} readonly />
}

render() {

    let {loading, error, transaction_items, readonly } = this.props;

    if(!loading){
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.dataSource = ds.cloneWithRows(transaction_items);

        if(readonly) {
            return (
                <ListView
                   dataSource={ this.dataSource }
                   renderRow={ this.renderReadonlyRow }
                   enableEmptySections={ true }
                />
            );
        }

        return (
            <ListView
               dataSource={ this.dataSource }
               renderRow={ this.renderRow }
               enableEmptySections={ true }
            />
        );

    }

    if(error) {
        return (
            <ErrorMessage text={this.props.error} />
        );
    }

    return (
        <Text style={{ fontSize: 8, color: '#999', textAlign: 'center', marginBottom: 15 }}>Loading cart...</Text>
    );
}
}



const mapStateToProps = ({ TransactionItemReducer, TransactionReducer }) => {    
    const { transaction } = TransactionReducer;
    const { transaction_items, error, loading } = TransactionItemReducer;

    return { transaction_items, error, loading, transaction };
}

export default connect(mapStateToProps, { getTransactionItems, getTotalQtyAndAmount })(TransactionItemList);

TransactionItemListItem.js

class TransactionItemListItem extends Component {


render() {
    const { id, bill_id, product_id, item_name, is_promo, is_compliment, qty, price, member_price, note, note_extra, Extras  } = this.props.item;
    return (
        <View style={{flexDirection: 'row', borderColor: '#CCC', borderWidth: 0.5, borderTopWidth: 0}}>
            <View style={{flex: 1, backgroundColor: '#FFF', margin: 1, marginRight: 0, padding: 2}}>
                <Text style={{fontSize: 7, color: '#555', textAlign: 'center'}}>{ qty }</Text>
            </View>
            <View style={{flex: 4, backgroundColor: '#FFF', margin: 1, marginRight: 0, padding: 2}}>
                { this.renderClickable() }
            </View>
            <View style={{flex: 2, backgroundColor: '#FFF', margin: 1, marginRight: 0, padding: 2}}>
                <Text style={{fontSize: 7, color: '#555', textAlign: 'right'}}>{ price*qty }</Text>
            </View>

            { this.renderDeleteButton() }    

        </View>
    );
}

renderIsCompliment(is_compliment) {
    if(is_compliment == 1){
        return (
            <Text style={{fontSize: 7, color: '#0C0', fontWeight: 'bold'}}>FREE!</Text>
        );
    }
}
renderClickable() {
    if(this.props.readonly) {
        return (
            <View>
                <Text style={{fontSize: 7, color: '#555'}}>{ this.props.item.item_name }</Text>
                { this.renderIsCompliment(this.props.item.is_compliment) }
            </View>
        );
    }

    return (
        <TouchableOpacity 
            onPress={() => this.props.getCartDetail(this.props.item.id)} >
            <View>
                <Text style={{fontSize: 7, color: '#555'}}>{ this.props.item.item_name }</Text>
                { this.renderIsCompliment(this.props.item.is_compliment) }
            </View>
        </TouchableOpacity>
    );
}
renderDeleteButton() {
    if(!this.props.readonly) {
        return (
            <View style={{flex: 1, backgroundColor: '#FFF', margin: 1, padding: 2}}>
            <TouchableOpacity 
                onPress={() => this.props.deleteCartItem(this.props.item.id, this.props.item.bill_id) } >
                <View>
                    <Text style={{fontSize: 7, fontWeight: 'bold', color: '#F00', textAlign: 'center'}}>X</Text>
                </View>
            </TouchableOpacity>
            </View>
        );
    }
}
}

操作:

export const getTransactionItems = (transaction_id) => {
return (dispatch) => {
    dispatch({ type: GET_TRANSACTION_ITEMS });


    fetch(CONFIG_GET_TRANSACTION_ITEMS_API +'/'+ transaction_id +'.json')
        .then((response) => response.json())
        .then((responseJson) => {
            //console.log(responseJson.result.length);
            if(responseJson.result.length > 0) {
                getTransactionItemsSuccess(dispatch, responseJson.result);
            } else {
                getTransactionItemsFail(dispatch);
            }

        })
        .catch(() => getTransactionItemsFail(dispatch));
}
};
const getTransactionItemsSuccess = (dispatch, transaction_items) => {
    dispatch({
        type: GET_TRANSACTION_ITEMS_SUCCESS,
        payload: transaction_items
    });
};
const getTransactionItemsFail = (dispatch) => {
    dispatch({ 
        type: GET_TRANSACTION_ITEMS_FAIL
    });
};

减速器

const INITIAL_STATE = { 
 transaction_items: '',
    error: '',
    loading: false,
    total: '',
    reloadCart: false,
};

export default (state=INITIAL_STATE, action) => {

//console.log(action);

switch(action.type) {
    case GET_TRANSACTION_ITEMS:  
        return { ...state, loading: true, error:'', transaction_items: '' };
    case GET_TRANSACTION_ITEMS_SUCCESS:  
        return { ...state, ...INITIAL_STATE, transaction_items: action.payload };
    case GET_TRANSACTION_ITEMS_FAIL:  
        return { ...state, loading: false, error: 'Cart is still Empty.',  };

    case ADD_TO_CART_FAIL:  
        return { ...state, loading: false, error: 'Fail to add item, Please try again.',  };

    default: 
        return state;
}
};

这仅在JS远程调试处于关闭状态时发生

0 个答案:

没有答案