FlatList 在 react-native 中的 CRUD 之后没有更新答案

【问题标题】：FlatList not updating after CRUD in react-nativeFlatList 在 react-native 中的 CRUD 之后没有更新
【发布时间】：2021-03-25 13:16:45
【问题描述】：

我正在尝试将新数据传递给 API 并将其显示在 FlatList 中。我所有的 CRUD 方法都通过了，但我的 FlatList 不会显示更改，直到我刷新我的“App.js”。我的“App.js”（如下所示）中的代码包含“删除”方法，该方法正在运行，我的 FlatList 会立即更新它，我想这是因为状态是本地的，并且 FlatList 可以找到它。但是当我使用“PUT”和“POST”方法时，在其他组件中声明它不会对其做出反应。

在 react-native 以及在其中导航方面，我是一个完全的菜鸟。关于如何解决这个难题的任何提示？

class Fetch extends React.Component {
    static navigationOptions = {
        
        title: 'Blomster Boden',
    };
  
    constructor(props) {
        super(props);
        this.state = { isLoading: true }
     
        this.forceUpdate();

        
      
    }
    actionOnRow(item) {
        this.props.navigation.navigate('Details', { item });
        this.state
    }
    editOnRow(item) {
        this.props.navigation.navigate('Edit', { item });
    this.state
    }
    suckulenter(item) {
        this.props.navigation.navigate('Info', { item });
        this.state
    }


    componentDidMount() {
        this.getData()
    }
    
    getData = () => {
         fetch('http://192.168.10.135:3000/blommor/')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson
                },
                );
            })
            .catch((error) => {
                console.error(error);
            });
    }
    

    delete(_id) {
        fetch('http://192.168.10.135:3000/blommor/' + _id,
            {
                method: "DELETE",
 
            }).then((result) => {
                result.json().then(() => {
                    alert("Blomman har tagits bort!")
                    this.getData()
                })
            })
            .catch((error) => {
                console.error(error);
            });
    }


    render() {
        if (this.state.isLoading) {
            return (
                <View style={styles.ActivityIndicator}>
                    <ActivityIndicator />
                </View>
            )
            
        }
        
        return (
            <View style={styles.container } >   
                <View style={styles.body}>
                    <Text h1 style={styles.h1}>Välkommen till blomsterboden</Text>
                   

                    <Card style={styles.card}>
                     
                        <Title style={styles.cardTitle}>Lista av våra blommor</Title>

         
                            


                         <FlatList  data={this.state.dataSource}

                        extraData={this.state}

                        renderItem={({ item }) =>

                            <TouchableWithoutFeedback onPress={() =>       
                                this.actionOnRow(item)}>
                                <Text style={styles.listTextStyle} numberOfLines={1} ellipsizeMode='middle'>
                                    <Text style={styles.Namn} >  {item.Namn}  </Text> 
                                    <IconButton
                                        icon="arrow-right"
                                        size={15}
                                    />

                                    <IconButton 
                                        icon="pencil"
                                        color={Colors.green400}
                                        size={20}
                                        title="Edit"
                                        onPress={() => this.editOnRow(item)}
                                    />

                                    <IconButton
                                        icon="delete"
                                        size={20}
                                        title="Ta bort"
                                        onPress={() => this.delete(item._id)}
                                    />

                                </Text>
                                
                            </TouchableWithoutFeedback>                         

                        }

                        keyExtractor={item => item._id.toString()}
                            /> 

                    </Card>

【问题讨论】：

了解“PUT”和“POST”方法的位置和如何以及状态是否在从外面的任何方式。
因此，“POST”和“PUT”方法位于“组件”映射中的两个单独的 .js 文件中。然而，“POST”.js 是我在 App.js 上调用 onPress 的模式，我在其中输入值并提交到我的 API - 但它没有像之前所说的那样更新。通过单击“App.js”中的“this.editOnRow”可以在另一个屏幕上创建“PUT”。我想问题是我的“extraData = {this.state}”应该在更改时更新列表，但无法识别其他组件的状态。但是我现在换redux已经太晚了，应该还有别的办法。
你可以传递一个处理状态的回调函数，而不是传递一个状态：stackoverflow.com/a/66803297/7451109
感谢您的意见！我会尝试一下.. 我希望我知道该怎么做，但我实际上不知道，在谷歌搜索时我发现没有适合我的问题。对于这些东西，我仍然是一个完全的初学者，并且在视频中进行全面的解释并没有给我太多。但是我要继续战斗！ :D 再次感谢！
不客气。稍后我会在我的答案中给你写一个简短的代码 sn-p！

标签： javascript reactjs react-native api flatlist

【解决方案1】：

这是因为您的数据库不是实时数据库！因此，当您在屏幕之间导航时，您将希望使用事件侦听器来刷新列表，每次您添加帖子并返回列表时，导航侦听器将被触发并刷新您的列表，因此您的代码更新如下：

    class Fetch extends React.Component {
        static navigationOptions = {
            
            title: 'Blomster Boden',
        };
      
        constructor(props) {
            super(props);
            this.state = { isLoading: true }
         
            this.forceUpdate();
    
            
          
        }
        actionOnRow(item) {
            this.props.navigation.navigate('Details', { item });
            this.state
        }
        editOnRow(item) {
            this.props.navigation.navigate('Edit', { item });
        this.state
        }
        suckulenter(item) {
            this.props.navigation.navigate('Info', { item });
            this.state
        }


  //An event listener that will trigger when screen is focused
  componentDidMount() {
    this._unsubscribe = this.props.navigation.addListener('focus', () => {
      this.getData()
    });
  }

  //Clean up the event listener
  componentWillUnmount() {
    this._unsubscribe();
  }

        getData = () => {
             fetch('http://192.168.10.135:3000/blommor/')
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({
                        isLoading: false,
                        dataSource: responseJson
                    },
                    );
                })
                .catch((error) => {
                    console.error(error);
                });
        }
        
    
        delete(_id) {
            fetch('http://192.168.10.135:3000/blommor/' + _id,
                {
                    method: "DELETE",
     
                }).then((result) => {
                    result.json().then(() => {
                        alert("Blomman har tagits bort!")
                        this.getData()
                    })
                })
                .catch((error) => {
                    console.error(error);
                });
        }
    
    
        render() {
            if (this.state.isLoading) {
                return (
                    <View style={styles.ActivityIndicator}>
                        <ActivityIndicator />
                    </View>
                )
                
            }
            
            return (
                <View style={styles.container } >   
                    <View style={styles.body}>
                        <Text h1 style={styles.h1}>Välkommen till blomsterboden</Text>
                       
    
                        <Card style={styles.card}>
                         
                            <Title style={styles.cardTitle}>Lista av våra blommor</Title>
    
             
                                
    
    
                             <FlatList  data={this.state.dataSource}
    
                            extraData={this.state}
    
                            renderItem={({ item }) =>
    
                                <TouchableWithoutFeedback onPress={() =>       
                                    this.actionOnRow(item)}>
                                    <Text style={styles.listTextStyle} numberOfLines={1} ellipsizeMode='middle'>
                                        <Text style={styles.Namn} >  {item.Namn}  </Text> 
                                        <IconButton
                                            icon="arrow-right"
                                            size={15}
                                        />
    
                                        <IconButton 
                                            icon="pencil"
                                            color={Colors.green400}
                                            size={20}
                                            title="Edit"
                                            onPress={() => this.editOnRow(item)}
                                        />
    
                                        <IconButton
                                            icon="delete"
                                            size={20}
                                            title="Ta bort"
                                            onPress={() => this.delete(item._id)}
                                        />
    
                                    </Text>
                                    
                                </TouchableWithoutFeedback>                         
    
                            }
    
                            keyExtractor={item => item._id.toString()}
                                /> 
    
                        </Card>

【讨论】：

嗨！哇，非常感谢您的评论-谢谢！我试过你的例子，但现在我在 componentDidMount 部分得到“找不到变量：导航”。
抱歉忘记添加 this.props.navigation ，更新我的答案
是的，它确实有所作为，我可能很接近。但是，现在当我打开 App.js 时，我卡在了加载屏幕上。我可以看到导航标题，所以应用程序正在运行。但是加载轮是我在“内容屏幕”中看到的唯一东西。没有错误消息，什么都没有 - 只是它不会停止加载。
我将“focus”更改为“willFocus”，它成功了！不过，我的 FlatList 似乎仍然一团糟。在我编辑帖子后，FlatList 开始出现故障，并且文本到处乱飞。当我通过 App.js 上的模态在我的 API 中添加帖子时也是如此，它不会立即显示。所以我似乎距离完成还很远。

【解决方案2】：

嗯，有两种方法可以听到变化。如果它们在同一棵树中，您可以将一个函数从您的组件传递给其他组件。然后可以在它们各自的“PUT”或“POST”操作完成后将此函数作为回调函数调用。然后，函数本身会以与“DELETE”方法相同的方式设置状态。

class ParentComponent extends React.Component {
    // ...
    onStateChange(newState) {
        this.setState(newState);
    }

    render() {
        return <ChildComponent onParentStateChange={this.onStateChange} />
    }
    // ...
}

class ChildComponent extends React.Component {
    // ...
    onStateChange() {
        this.props.onParentStateChange({
            key: value
        });
    }
    // ...
}

如果它们不在同一棵树中，或者您不喜欢四处传递回调，您可以使用reducers 来选择更全局的解决方案。

【讨论】：