Question

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中。

 <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个以上帖子的地方自动更新。

P.S。 -我也尝试过onRefresh()，但对我的问题没有帮助。

Answer 1

我认为您使用的是错误的方法。更新后的组件将被更新。您应该改用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上自动更新

Answer 2

使用forceUpdate()

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

屏幕未在React Native中自动刷新

2 个答案: