Question

反应本地

我正在使用“导航”在与此组件相同的组件之间移动，只是具有不同的ID。有些工作有的没有，对本地人的反应向我显示了此警告。

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请取消“ componentWillUnmount方法”中的所有订阅和异步任务。

我组件的代码：

class MotosbicisScreen extends Component {
  static navigationOptions = {
    title: 'Motos y bicis',
  };
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this.getData()
}

getData = async () => {
    const url = 'https://url';
    fetch(url).then((response) => response.json())
    .then((responseJson) =>{
        this.setState({
            data:responseJson
        })
    })
}

  renderRow = ({item}) => {
    if (item.rubroClasificado == 9) {
    if(item.imageJob == null) {
    return(          
      <Card>
      <CardItem>
      <Body>
          <Text>
            {item.Texto} 
            </Text>
            </Body>
            </CardItem>
          </Card>)
    } else {
        img = 'http://url/' +  item.imagepath;
        return(         
            <View style={styles.item}>
            <Image
            source={{ uri: img}}
            width={Dimensions.get('window').width}
            />
            </View>            
            )
    }
  }
} 

  render() {

    return (
      <View style={styles.container}>
          <FlatList style={styles.container}
        data={this.state.data}
        renderItem={this.renderRow}
        keyExtractor={(item, index) => index.toString()} 

        />
    </View>
    );

}
}

Answer 1

这是由于以下事实：卸载组件（您已离开页面）时，该组件正在调用setState。

过去，一种解决方案是跟踪是否在调用setState之前安装了组件，但这是不好的做法。

以下文章涵盖了您的问题，旧的坏习惯以及一种可能的解决方案。（https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html）

警告：无法在未安装的组件（多个组件）上执行React状态更新

1 个答案: