React Native FlatList 未使用状态值呈现

Question

我从 API 获取数据（使用 Redux Saga），我想在 FlatList 中显示数据。在 ComponentDidMount 中，我正在调度操作以命中 API。数据没有任何问题。但是第一次，数据没有显示在平面列表中。如果我在 VS 代码数据显示中输入 Ctrl + S（保存）。我想设置

class MovieDetailsScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        data:[],

    };
}

componentDidMount(){
   this.props.getMovieData();
   if(this.props.movieList){
       this.setState({data:movieList})
   }
}


renderItem = ({ item }) => {
    return(
    <View style={styles.mainContainer}> 

        <View style={styles.textContainer}>
            <Text >{item.movieName}</Text>
            <Text >{item.movieDescription}</Text>
        </View>


    )
}

render() {

    return (
        <View >

            <FlatList  
                keyExtractor={(item, index) => index.toString()}
                data={this.state.data}
                renderItem={this.renderItem}
            /> 

        </View>

    );
}

}

函数 mapStateToProps(state) {

return {
   movieList : state.movieListReducer.movieList

};

}

导出函数 mapDispatchToProps(dispatch) { 返回{

     getMovieData: () => dispatch(movieListActions.getMovieData()),

}

}

导出默认连接( mapStateToProps, mapDispatchToProps )(MovieDetailsS​​creen);

我尝试在 flatlist 中添加一个加载器，直到数据被加载，但它不起作用。请注意，我需要使用 setState({data:movieList}) 因为将来我有更多的实现，所以我不能在 flatlist 数据中使用 this.props.movi​​eList

Answer 1

您应该在 componentDidUpdate 中调用 this.setState({data:movieList}) 方法，因为 componentDidMount 只是第一次运行。

你的代码应该是这样的，

componentDidMount(){
   this.props.getMovieData();
}

// This method will execute everytime a state or props change.
componentDidUpdate(prevProps){
   if(this.props.movieList != prevProps.movieList){
       this.setState({data:this.props.movieList})
   }
}

Answer 2

您应该创建一个新函数来保存数据的获取并为您提供创建加载程序的选项。

首先为你的状态添加一个加载选项：

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

然后创建函数：

   fetchMovieList = () => {
       this.setState({ loading: true })
    this.props.getMovieData()
     .finally( () => {
         this.setState({ loading: false })
            if(this.props.movieList){
              this.setState({data:movieList})
      }
  }

调用componentDidMount中的函数：

componentDidMount(){
   this.fetchMovieList();
}

并且在你的 render() 设置根据加载如果它是真的 显示一个空视图，如果为 false 则显示平面列表：

render() {
    if (this.state.loading) {
        return (
            <View>
                <Text> Loading </Text>
            </View>
        );
    }
    return (
        <View >
        <FlatList  
            keyExtractor={(item, index) => index.toString()}
            data={this.state.data}
            renderItem={this.renderItem}
        /> 

    </View>

);
}
Instead of the text loading you can use the ActivityIndicator provided by react-native. Please check if i missed any semicolon or parentheses.