React native React Native FlatList未使用状态值进行渲染

我从API（使用Redux Saga）获取数据，并希望在平面列表中显示数据。在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>

    );
}

}

导出函数mapDispatchToProps（调度）{ 返回{

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

}

}

导出默认连接( MapStateTops， mapDispatchToProps )（电影细节屏幕）

---

在加载数据之前，我尝试在flatlist中添加加载程序，但它不起作用。请注意，我需要使用setState（{data:movieList}），因为将来我会有更多的实现，所以无法在flatlist数据中使用this.props.movieList

您应该调用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})
   }
}

---

您应该在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})
   }
}

---

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

首先将加载选项添加到您的状态：

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();
}

如果为true，则在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.

render（）{
if（this.state.loading）{
返回(
加载
);
}
返回(
index.toString（）}
data={this.state.data}
renderItem={this.renderItem}
/> 
);
}
您可以使用react native提供的ActivityIndicator来代替文本加载。请检查我是否遗漏了分号或括号。

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

首先将加载选项添加到您的状态：

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();
}

如果为true，则在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.

render（）{
if（this.state.loading）{
返回(
加载
);
}
返回(
index.toString（）}
data={this.state.data}
renderItem={this.renderItem}
/> 
);
}
您可以使用react native提供的ActivityIndicator来代替文本加载。请检查我是否遗漏了分号或括号。

不能这样做。然后获得不变违例：最大更新深度超过了，我错过了道具比较的条件。请检查上面更新的代码。无法执行此操作。然后获得不变违例：最大更新深度超过了，我错过了道具比较的条件。请检查上面更新的代码。尝试添加

extraData={this.state.data}

。在尝试添加

extraData={this.state.data}

时，阅读有关该道具的更多信息。阅读更多关于该道具的信息，我有一个类似的问题，但在我的情况下，数据没有立即加载，最初它会呈现一个数字字符串，如

1120939

，但按下CTRL+S后，它会呈现回我想要的正常值，等等

34

。可能的原因是什么？我有一个类似的问题，但在我的情况下，数据没有立即加载，最初它会呈现一个数字字符串，如

1120939

，但按下CTRL+S后，它会呈现回我想要的正常值，等等

34

。原因可能是什么？