React Native 中的屏幕不会自动刷新答案

【问题标题】：Screen not refreshing in React Native automaticallyReact Native 中的屏幕不会自动刷新
【发布时间】：2023-04-05 15:28:01
【问题描述】：

async componentDidMount () {         
        this._isMounted = true;
        await this.showPosts();
  }

  componentDidUpdate () {
        this.showPosts();   
  }

  showPosts = async () => {    
    try {    
    var userID = await AsyncStorage.getItem('userID');

    fetch(strings.baseUri+"getPostWithUserID", {
        method: 'POST',
        headers: {
           Accept: 'application/json',
           'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            "user_id": userID
        })
        })
        .then((response) => response.json())
        .then((responseJson) => {

        let jsonObj = JSON.parse(JSON.stringify(responseJson));

        if (jsonObj.status=="true") {

            this.setState({ 
                data: responseJson.data, 
                imageSrc: responseJson.data.imgSrc, 
            });

        } 
        else {
            if (this._isMounted) {
                this.setState({show: false});
            }
        }  

        })
        .catch((error) => {
            console.error(error);
        });
    }
    catch (err) {
        console.warn(err);
      }

  }

  componentWillUnmount () {
    this._isMounted = false;
  }

showPosts 是我的函数，它获取数据并将其显示到平面列表中。

 <FlatList 
            data={this.state.data}
            keyExtractor={(index) => index.toString()}
            renderItem={ ({item,index}) => this._renderItem(item,index) }
            extraData={[ this.state.checked, this.state.data ]}
 />

现在，当我上传一篇帖子并返回调用showPosts 的主屏幕并通过重新加载应用程序在我的模拟器上检查它时，它会显示该帖子。
现在，当我上传另一个帖子并返回主屏幕时，我不需要在模拟器中重新加载我的应用程序，但我的componentDidUpdate 会被调用并自动刷新屏幕并向我显示新帖子。

我的问题是，当主屏幕上的帖子为零时，为什么我必须再次重新加载（通过多次按 R 重新加载）我的应用程序。我希望在我上传第一篇文章时自动更新我的屏幕。仅当帖子超过 1 条时屏幕才会自动更新。

附： - 我也试过 onRefresh() ，但对我的问题没有帮助。

【问题讨论】：

标签： javascript android reactjs react-native react-native-flatlist

【解决方案1】：

使用forceUpdate()

请查看此链接：https://reactjs.org/docs/react-component.html#forceupdate

【讨论】：

我试过了。没有为我工作。我试过forceUpdate () { this.showPosts(); }

【解决方案2】：

我认为你使用了错误的方法。组件确实更新将在更新后被调用。您应该改用 shouldComponentUpdate 并在此处返回 true/false。

您可以在导航到主屏幕时传递道具，如下所示：

this.props.navigation.navigate("PathName", {option: "update"})

然后在主屏幕中的 shouldComponentUpdate 中捕获它

 shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.navigation.state.params.option === "update") {
        this.showPosts()
        return true
    }
    return false
}

或者也许您应该将您的帖子列表存储在状态管理器（例如 redux）中，并将其作为您列表的数据源。然后更新不同屏幕的列表，列表会自动更新到 HomeScreen

【讨论】：

你能给我一个例子来说明如何在我的情况下使用它吗？
如何上传帖子？你是在应用中做的吗？
是的。我有一个选项卡，从中单击图片，然后导航回主屏幕并更新主屏幕（如果有超过 1 个帖子）
它给了我一个错误。 TypeError: undefined is not an object (评估 'nextProps.navigation.state.params.option')
试试 if(nextProps.navigation.state.params) { if(nextProps.navigation.state.params.option === "update") { this.showPosts() return true } }跨度>