Question

我正在尝试从服务器获取数据后更新ListView.DataSource，但它没有发生。我有两个组件，一个是在另一个组件中导入的。我从基本组件尝试更新其他组件中的ListView.DataSource。这是我的代码。

index.android.js

 import React, { Component } from "react";
 import { ListView, View, Button, AppRegistry } from "react-native";

 import OtherComponent from "./Components/OtherComponent";

 class MyApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
        movies: [{ title: "ABCD" }, { title: "EFGH" }]
    };
}

getTopics = () => {
    fetch("https://facebook.github.io/react-native/movies.json")
        .then(response => response.json())
        .then(responseText => {
            console.log(responseText.movies);
            this.setState({
                movies: responseText.movies
            });
        })
        .catch(error => {
            console.warn(error);
        });
};

render() {
    return (
        <View>
            <Button
                onPress={this.getTopics}
                title="Get Topics"
                color="#841584"
                accessibilityLabel="Learn more about this purple button"
            />
            <OtherComponent movies={this.state.movies} />
        </View>
    );
}
}

AppRegistry.registerComponent("MyApp", () => MyApp);

OtheComponent.js

 import React, { Component } from "react";
 import { View, ListView, Text, StyleSheet, Button } from "react-native";

 export default class FormativeRevisionList extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
        dataSource: ds.cloneWithRows(props.movies)
    };
}

render() {
    return (
        <View>
            <ListView
                style={styles.listContainer}
                dataSource={this.state.dataSource}
                renderRow={rowData => (
                    <View>
                        <Text style={styles.listItem}>{rowData.title}</Text>
                    </View>
                )}
            />
        </View>
    );
}
}

const styles = StyleSheet.create({
listContainer: {
    paddingTop: 22
},
listItem: {
    fontSize: 30,
    fontWeight: "bold",
    textAlign: "center"
}
});

Answer 1

在您的代码中，您只需将dataSource设置为contructor FormativeRevisionList，这意味着FormativeRevisionList只会在您首次呈现时呈现给定的电影。

要在按“获取主题”按钮后呈现新列表，您需要在收到新道具时再次设置dataSource，这可以通过在FormativeRevisionList componentWillReceiveProps中设置

来实现

  componentWillReceiveProps(nextProps) {
    if (nextProps.movies !== this.props.movies) {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(nextProps.movies)
      })
    }
  }

您可以从here

了解有关componentWillReceiveProps的更多信息

React Native：ListView.DataSource未更新

1 个答案: