React 警告：setState(...) 只能更新已安装或正在安装的组件

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;

如您所见，我正在以非常简单的方式向您展示电影列表。现在显示一个改变视图的 sn-p。当我将应用中的页面从放映电影的页面更改为放映信息时，我的问题就出现了。

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;

我在第一个 sn-p 的函数 _onChange() 中放置了一个 log()（因为问题存在），当我更改页面时，该函数被调用多次并获得上述警告。如何解决？我在哪里做错了？谢谢！

Answer 1

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

我猜您是在将匿名函数传递给添加/删除事件侦听器，以维护您的 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
        });
    };

注意：以上依赖于class properties syntax，该class properties syntax 正在提议中，目前通过 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);
   };