从数组中删除特定项目,无法按预期工作

时间:2018-10-25 19:44:16

标签: javascript arrays reactjs firebase react-native

有人可以告诉我从数组中删除项目有什么问题吗?在带有axios.delete方法的deleteSingleItemHandler中,它的工作原理应与它一样,并且在Firebase上会完全删除选定的项目,但是当我想从状态数组中删除该项目时,它会删除一个项目,而不是确切选择的项目,例如,我单击第三个项目,在firebase上删除了第三项,然后在设备屏幕上删除了第二项...我在做什么错了?

提前谢谢! 干杯

class HistoryScreen extends Component {
  state = {
    orders: []
  };

  componentDidMount() {
    axios
      .get(".../orders.json")
      .then(response => {
        const fetchedOrders = [];

        for (let key in response.data) {
          fetchedOrders.push({
            ...response.data[key],
            id: key
          });
        }

        this.setState({ orders: fetchedOrders });

      });
  }

  deleteSingleItemHandler = id => {
    axios
      .delete(`...orders/${id}.json`)
      .then(response => {
        console.log(response);
      });

    const newArray = [...this.state.orders];
    newArray.splice(id, 1);

    this.setState({ orders: newArray });
  };

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.completeOrder}>

              {this.state.orders.map(order => {
              return (
                <TouchableOpacity
                  key={order.id}
                  onPress={() => this.deleteSingleItemHandler(order.id)}
                >
                  <View style={styles.singleItem}>
                    <View style={styles.orderItem}>
                      <View style={{ flex: 1, marginLeft: 5 }}>
                        <Text style={{ fontFamily: Fonts.GloriaHallelujah }}>
                          {order.articleName}
                        </Text>
                      </View>

                      <View
                        style={{
                          flex: 1,
                          justifyContent: "flex-end",
                          flexDirection: "row",
                          marginRight: 5
                        }}
                      >
                        <Text>{order.articlePrice}</Text>
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

1 个答案:

答案 0 :(得分:5)

函数R.prop()的第一个参数是索引。

使用功能Array.prototype.splice

---------------------------------------------------------------------------
OverflowError                             Traceback (most recent call last)
<ipython-input-226-8288eada1ce9> in <module>
----> 1 _checksum(b'\x00d\x00\x00\x00')

<ipython-input-225-2e5beaea293f> in _checksum(message)
     18             crc_result = bxor((blshift(crc_result, b'\x01')) , b'\xD5')
     19         else:
---> 20             crc_result = blshift(crc_result, b'\x01')
     21     #-------------
     22     return crc_result;

<ipython-input-225-2e5beaea293f> in blshift(b1, b2)
      6     return bytes(map(operator.and_, b1, b2))
      7 def blshift(b1, b2): # use shift left for bytes
----> 8     return (int.from_bytes( b1, byteorder='little') << int.from_bytes( b2, byteorder='little')).to_bytes(1, byteorder='little')
      9 def _checksum(message):
     10     #calculate crc

OverflowError: int too big to convert

或者您可以使用函数Array.prototype.findIndex

过滤该对象
newArray.splice(newArray.findIndex(o => o.id === id), 1);