反应警告:设置状态(..)只能更新已装载或已装载的组件

Question

我有一个问题：我正在使用React/ReactNative + Flux构建我的第一个应用程序，并收到以下警告：

setState（...）：只能更新已挂载或已挂载的组件。这 通常意味着您在未挂载的组件上调用了 setState（）。这是 一个无操作。请检查未定义组件的代码。

在我的代码上方：

class ListMovies extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
            loaded: false
        };
    };
    componentDidMount() {
        ApiListMovies.getMovies();
        ListMoviesStore.addChangeListener(() => this._onChange());
    };
    componentWillUnmount() {
        ListMoviesStore.removeChangeListener(() => this._onChange());
    };
    _onChange() {
        console.log(this.state);
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(ListMoviesStore.getListMovies()),
            loaded: true
        });
    };
    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderMovie}
                style={styles.listView}
            />
        );
    }
    renderMovie(movie) {
        return (
            <View style={styles.container}>
                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        );
    }
}
module.exports = ListMovies;

如您所见，我以非常简单的方式向您展示了电影列表。现在显示一个更改视图的代码段。当我更改应用程序中从显示电影的页面更改为显示信息的页面时，我的问题就来了。

class TabsView extends React.Component {
    //do stuff...
  renderContent() {
    switch (this.state.tab) {
      case 'List Movies':
        return <ListMoviesView/>;
      case 'Info':
        return <InfoView/>;
    }
  }
  render() {
    return (
        <View style={styles.content} key={this.state.tab}>
            {this.renderContent()}
        </View>
    );
  }
}
module.exports = TabsView;

我将一个log（）放在第一个代码片段的函数_onChange（）（因为问题存在在那里），当我更改页面时，该函数被调用几次并获得上述警告。如何解决？我哪里做错了？谢谢！

Answer 1

您将为每个添加和删除事件侦听器函数提供一个新的函数实例。因此，删除将无法按预期工作，因为它针对不同的函数实例，并且更改事件仍会触发事件。

我猜您正在将匿名函数传递给添加/删除事件侦听器，以维护this.setState调用的范围。 可以使用绑定到类属性的匿名函数来维护作用域，然后只需在添加/删除调用中引用该属性，如下所示：

    componentDidMount() {
        ApiListMovies.getMovies();
        ListMoviesStore.addChangeListener(this._onChange);
    };
    componentWillUnmount() {
        ListMoviesStore.removeChangeListener(this._onChange);
    };
    // We use anonymous function bound to the class property, this
    // will maintain our scope.
    _onChange = () => {
        console.log(this.state);
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(ListMoviesStore.getListMovies()),
            loaded: true
        });
    };

注意：以上依赖于类属性语法，该语法在提案中，目前通过 babel 阶段 1 启用。 如果没有此功能，则可以在构造函数调用中创建函数。 这样：

 class ListMovies extends React.Component {
   constructor(props) {
     this.state = {
      dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}),
      loaded: false
    };
    // We use anonymous function bound to the class property, this
    // will maintain our scope.
    this._onChange = () => {
        console.log(this.state);
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(ListMoviesStore.getListMovies()),
            loaded: true
        });
    };
   }
   componentDidMount() {
     ApiListMovies.getMovies();
     ListMoviesStore.addChangeListener(this._onChange);
   };
   componentWillUnmount() {
     ListMoviesStore.removeChangeListener(this._onChange);
   };