小编Fat*_*zla的帖子

如何删除事件侦听器,以便在卸载组件时不会尝试更新状态?

我设置了一些动态样式,除卸载组件外,一切正常。然后它抛出一个错误:无法在未安装的组件上调用 setState(或 forceUpdate)。

它是堆栈导航器中的第二个屏幕,当我转到第三个屏幕时,一切都很好,但是当我转到第一个并卸载组件时,它会引发错误。

我试图删除 componentWillUnmount 中的事件侦听器但没有成功,显然我做错了什么。

另外,我已经尝试过这种方法 this.props.navigation.isFocused() 并且它再次工作得很好,但是如果我在第三个屏幕上并旋转设备并返回,Dimensions 事件侦听器看不到更改和样式是一个烂摊子。

那么如何在卸载组件时停止事件侦听器?

提前致谢。

constructor(props) {
    super(props);
    Dimensions.addEventListener("change", dims => {
      // this.props.navigation.isFocused() ?
      this.setState({
        resStyles: {
          imageFlex: Dimensions.get("window").height > 500 ? "column" : "row",
          imageHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
          infoHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
          infoWidth: Dimensions.get("window").height > 500 ? "100%" : "50%"
        }
      });
      // : null;
    });
  }
Run Code Online (Sandbox Code Playgroud)

组件将卸载

componentWillUnmount() {
    console.log("Unmounted");

    Dimensions.removeEventListener("change", dims => {
      // this.props.navigation.isFocused() ?
      this.setState({
        resStyles: {
          imageFlex: …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native react-native-navigation

4
推荐指数
1
解决办法
7704
查看次数

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

有人可以告诉我从数组中删除项目有什么问题?在带有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 …
Run Code Online (Sandbox Code Playgroud)

javascript arrays firebase reactjs react-native

1
推荐指数
1
解决办法
47
查看次数